"test breadcrumbs (no bootstrap here)"
Bootstrap 3.0.0 Snippet by ElkhoulyAyman

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <!-- another version - flat style with animated hover effect --> <div style="margin-left:20px;margin-top:50px;" <div id="bc1" class="myBreadcrumb"> <a href="#" class="active"><i class="fa fa-home fa-2x"></i></a> <div>...</div> <a href="#"><div>label 1</div></a> <a href="#"><div>A very very long label 2 to truncate</div></a> <a href="#"><div>label 3</div></a> <a href="#"><div>A very very long label 4 to truncate</div></a> <a href="#"><div>label 5</div></a> <a href="#"><div>label 6</div></a> </div> </div> <div style="margin-left:20px;margin-top:50px;" <div id="bc2" class="myBreadcrumb"> <a href="#" class="active"><i class="fa fa-home fa-2x"></i></a> <div>...</div> <a href="#"><div>label 1</div></a> <a href="#"><div>A very very long label 2 to truncate</div></a> <a href="#"><div>label 3</div></a> <a href="#"><div>A very very long label 4 to truncate</div></a> <a href="#"><div>label 5</div></a> <a href="#"><div>label 6</div></a> <a href="#"><div>label 7</div></a> <a href="#"><div>label 8</div></a> </div> </div> <!--div style="margin-left:20px;margin-top:50px;margin-bottom:200px" <div id="bc2" class="myBreadcrumb"> <a href="#" class="active"><i class="fa fa-home fa-2x"></i></a> <a href="#"><div>label 1</div></a> <a href="#"><div>A very very long label 2 to truncate</div></a> <a href="#"><div>label 3</div></a> <a href="#"><div>A very very long label 4 to truncate</div></a> <a href="#"><div>label 5</div></a> <a href="#"><div>label 6</div></a> <a href="#"><div>label 7</div></a> <a href="#"><div>label 8</div></a> </div> </div--> <br/> Adapted from http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation
.myBreadcrumb { display: inline-block; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35); overflow: hidden; border-radius: 5px; } .myBreadcrumb > * { text-decoration: none; outline: none; display: block; float: left; font-size: 12px; line-height: 36px; color: black; /*need more margin on the left of links to accomodate the numbers*/ padding: 0 10px 0 30px; background: white; position: relative; transition: all 0.5s; } .myBreadcrumb > * div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/ .myBreadcrumb > *:first-child { padding-left: 10px; border-radius: 5px 0 0 5px; /*to match with the parent's radius*/ } .myBreadcrumb >*:first-child i { vertical-align: sub; } .myBreadcrumb > *:last-child { border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/ padding-right: 20px; padding-right: 8px; } /*hover/active styles*/ .myBreadcrumb a.active, .myBreadcrumb a:hover{ background: #9EEB62; } .myBreadcrumb a.active:after, .myBreadcrumb a:hover:after { background: #9EEB62; } /*adding the arrows for the myBreadcrumbs using rotated pseudo elements*/ .myBreadcrumb > *:after { content: ''; position: absolute; top: 0; right: -18px; /*half of square's length*/ /*same dimension as the line-height of .myBreadcrumb a */ width: 36px; height: 36px; /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem) if diagonal required = 1; length = 1/1.414 = 0.707*/ transform: scale(0.707) rotate(45deg); -ms-transform:scale(0.707) rotate(45deg); -webkit-transform:scale(0.707) rotate(45deg); /*we need to prevent the arrows from getting buried under the next link*/ z-index: 1; /*background same as links but the gradient will be rotated to compensate with the transform applied*/ background: white; /*stylish arrow design using box shadow*/ box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1); /* 5px - for rounded arrows and 50px - to prevent hover glitches on the border created using shadows*/ border-radius: 0 5px 0 50px; transition: all 0.5s; } /*we dont need an arrow after the last link*/ .myBreadcrumb > *:last-child:after { content: none; } /*we will use the :before element to show numbers*/ .myBreadcrumb > *:before { /*some styles now*/ border-radius: 100%; width: 20px; height: 20px; line-height: 20px; margin: 8px 0; position: absolute; top: 0; left: 30px; background: white; background: linear-gradient(#444, #222); font-weight: bold; box-shadow: 0 0 0 1px #ccc; } .myBreadcrumb > *:nth-child(n+2) { display:none; } @media (max-width: 767px) { .myBreadcrumb > *:nth-last-child(-n+4) { display:block; } .myBreadcrumb > * div { max-width: 100px; } } @media (min-width: 768px) { .myBreadcrumb > *:nth-last-child(-n+6) { display:block; } .myBreadcrumb > * div { max-width: 175px; } }
$(document).ready(function(){ $(window).resize(function() { //console.debug($("#bc1 a:hidden")) ellipses1 = $("#bc1 :nth-child(2)") if ($("#bc1 a:hidden").length >0) {ellipses1.show()} else {ellipses1.hide()} ellipses2 = $("#bc2 :nth-child(2)") if ($("#bc2 a:hidden").length >0) {ellipses2.show()} else {ellipses2.hide()} }) });

Related: See More


Questions / Comments: