CSS3 Triangle Bread crumb Navigation Menu

by muthu 2013-12-13 11:29:54

Triangle Bread crumb Navigation Menu
----------------------------------------- DEMO ---------------------------------------------
menu.jpg
----------------------------------------- CSS3 ---------------------------------------------

.breadcrumb { list-style:none; overflow:hidden; font:bold 12px Arial, Helvetica, sans-serif; } .breadcrumb li { float:left; }
.breadcrumb li a { color:white; text-decoration:none; padding:10px 0 10px 55px; background:#666; position:relative; display:block; float:left; }
.breadcrumb li a:after { content:" "; display:block; width:0; height:0; border-top:50px solid transparent;
border-bottom:50px solid transparent; border-left:30px solid #666; position:absolute; top:50%; margin-top:-50px; left:100%; z-index:2; }
.breadcrumb li a:before { content:" "; display:block; width:0; height:0; border-top:50px solid transparent;
border-bottom:50px solid transparent; border-left:30px solid white; position:absolute; top:50%; margin-top:-50px; margin-left:1px; left:100%; z-index:1; }
.breadcrumb li:first-child a { padding-left:10px; }
.breadcrumb li:nth-child(2) a { background:#666; } .breadcrumb li:nth-child(2) a:after { border-left-color:#666; }
.breadcrumb li:nth-child(3) a { background:#666; } .breadcrumb li:nth-child(3) a:after { border-left-color:#666; }
.breadcrumb li:nth-child(4) a { background:#666; } .breadcrumb li:nth-child(4) a:after { border-left-color:#666; }
.breadcrumb li:nth-child(5) a { background:#666; } .breadcrumb li:nth-child(5) a:after { border-left-color:#666; }
.breadcrumb li:last-child a { background:white !important; color:black; pointer-events:none; cursor:default; }
.breadcrumb li:last-child a:after { border:0; }
.breadcrumb li a:hover { background:#000; } .breadcrumb li a:hover:after { border-left-color:#000 !important; }

----------------------------------------- HTML5 ---------------------------------------------

<div id="page-wrap">
<ul class="breadcrumb">
<li> <li> <li> <li> <li> <li></li>
</ul>
</div>
1107
like
0
dislike
0
mail
flag

You must LOGIN to add comments