"test-breadcrumbs"
Bootstrap 3.3.0 Snippet by digitalquest

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<ul id="bc1" class="breadcrumb"><span id="ellipses" style="display: inline;">...</span>
<li><a href="http://moodle-test.warwick.ac.uk/my/">My home</a> <span class="divider"> <span class="accesshide "><span class="arrow_text">/</span> </span><span class="arrow sep">►</span> </span>
</li>
<li><span tabindex="0">Site administration</span> <span class="divider"> <span class="accesshide "><span class="arrow_text">/</span> </span><span class="arrow sep">►</span> </span>
</li>
<li><span tabindex="0">Courses</span> <span class="divider"> <span class="accesshide "><span class="arrow_text">/</span> </span><span class="arrow sep">►</span> </span>
</li>
<li><a href="http://moodle-test.warwick.ac.uk/course/management.php">Manage courses and categories</a> <span class="divider"> <span class="accesshide "><span class="arrow_text">/</span> </span><span class="arrow sep">►</span> </span>
</li>
<li><a href="http://moodle-test.warwick.ac.uk/course/management.php?categoryid=1">Miscellaneous</a> <span class="divider"> <span class="accesshide "><span class="arrow_text">/</span> </span><span class="arrow sep">►</span> </span>
</li>
<li><span tabindex="0">Physics Webwork Test</span></li>
</ul>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* The responsive part */
.breadcrumb > li {
/* With less: .text-overflow(); */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.breadcrumb > *:nth-child(n+1) {
display:none;
}
.invisible{display:none;}
/* === For phones =================================== */
@media (max-width: 767px) {
.breadcrumb > *:nth-last-child(-n+2) {
display:inline;
}
.breadcrumb > * {
max-width: 60px;
}
}
/* === For tablets ================================== */
@media (min-width: 768px) and (max-width:991px) {
.breadcrumb > *:nth-last-child(-n+4) {
display:inline;
}
.breadcrumb > * {
max-width: 100px;
}
}
/* === For desktops ================================== */
@media (min-width: 992px) {
.breadcrumb > *:nth-last-child(-n+6) {
display:inline;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function() {
toggle_ellipses();
/***** Responsive breadcrumbs *****/
$(window).resize(function() {
toggle_ellipses();
});
/***** Responsive breadcrumbs ******/
});
function toggle_ellipses() {
var ellipses1 = $("#ellipses");
var howlong = $("#bc1 li:hidden").length;
if ($("#bc1 li:hidden").length > 1) {
ellipses1.show();
console.log("length: " + howlong + " => show")
} else {
ellipses1.hide();
console.log("length: " + howlong + " => hide")
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Angular
Triangle Breadcrumbs Arrows

Questions / Comments: