Triangle Breadcrumbs Dengan CSS
Example / Contoh :
Script :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Triangle Breadcrumbs</title>
<link rel="stylesheet" href="css/style.css">
<style>
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 55px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
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; /* Go big on the size, and let overflow hide */
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: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:last-child a {
background: transparent !important;
color: black;
pointer-events: none;
cursor: default;
}
.breadcrumb li:last-child a:after { border: 0; }
.breadcrumb li a:hover { background: hsla(34,85%,25%,1); }
.breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><script type="text/javascript" async="" src="//s3.buysellads.com/ac/bsa.js"></script><script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" id="_bsap_js_3469a2a501a9e18091036aa0c89f9dcb" src="http://s3.buysellads.com/r/s_3469a2a501a9e18091036aa0c89f9dcb.js?v=1337526000000" async="async"></script><style type="text/css" id="bsa_css">.one{position:relative}.one .bsa_it_ad{display:block;padding:15px;border:1px solid #e1e1e1;background:#f9f9f9;font-family:helvetica,arial,sans-serif;line-height:100%;position:relative}.one .bsa_it_ad a{text-decoration:none}.one .bsa_it_ad a:hover{text-decoration:none}.one .bsa_it_ad .bsa_it_t{display:block;font-size:12px;font-weight:bold;color:#212121;line-height:125%;padding:0 0 5px 0}.one .bsa_it_ad .bsa_it_d{display:block;font-size:11px;color:#434343;font-size:12px;line-height:135%}.one .bsa_it_ad .bsa_it_i{float:left;margin:0 15px 10px 0}.one .bsa_it_p{display:block;text-align:right;position:absolute;bottom:10px;right:15px}.one .bsa_it_p a{font-size:10px;color:#666;text-decoration:none}.one .bsa_it_ad .bsa_it_p a:hover{font-style:italic}</style></head>
<body>
<div id="demo-top-bar"><div id="demo-bar-inside"><h2 id="demo-bar-badge">CSS-Tricks Example</h2><div id="demo-bar-buttons"><a class="header-button" href="http://css-tricks.com">Back Home</a> <a class="header-button" href="http://css-tricks.com/downloads/">More Demos</a></div><div id="demo-bar-ad"><div id="bsap_1255488" class="bsap_1255488 bsap"><div class="bsa_it one"><div class="bsa_it_ad ad1 odd" id="bsa_2191829"><a href="http://stats.buysellads.com/click.go?z=1255488&b=2191829&g=&s=&sw=1024&sh=768&br=chrome,16,win&r=0.7188130607828498&link=http://www.slidedeck.com/?utm_source=adpacks&utm_medium=banner&utm_campaign=BSA" onmouseover="window.status = 'http://www.slidedeck.com/?utm_source=adpacks&utm_medium=banner&utm_campaign=BSA'; return true;" onmouseout="window.status=''; return true;" target="_blank"><span class="bsa_it_i"><img src="http://s3.buysellads.com/1255475/101692-1334103345.jpeg" width="130" height="100" alt="SlideDeck 2 is Here."></span></a><a href="http://stats.buysellads.com/click.go?z=1255488&b=2191829&g=&s=&sw=1024&sh=768&br=chrome,16,win&r=0.8269720473326743&link=http://www.slidedeck.com/?utm_source=adpacks&utm_medium=banner&utm_campaign=BSA" onmouseover="window.status = 'http://www.slidedeck.com/?utm_source=adpacks&utm_medium=banner&utm_campaign=BSA'; return true;" onmouseout="window.status=''; return true;" target="_blank"><span class="bsa_it_t">SlideDeck 2 is Here.</span><span class="bsa_it_d">29 million slider configurations, 12 dynamic content sources & 7 custom themes!</span></a><div style="clear:both"></div></div><span class="bsa_it_p"><a href="http://buysellads.com/buy/detail/1098/zone/1255488?utm_source=site_1098&utm_medium=website&utm_campaign=imagetext&utm_content=zone_1255488">ads by BSA</a></span></div></div><a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a></div></div></div>
<div id="page-wrap">
<h1>CSS Triangle Breadcrumbs</h1>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Vans</a></li>
<li><a href="#">Camper Vans</a></li>
<li><a href="#">1989 VW Westfalia Vanagon</a></li>
</ul>
</div>
</body>
</html>Selamat Mencoba ^_^ , Jika ada Yang Ingin Ditanyakan Silahkan Komen Dibawah Postingan Ini / Di dalam Kotak Komentar :D
No comments:
Post a Comment