Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flat CSS3 Breadcrumb
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<h1>Flat CSS3 breadcrumb</h1>
<ul id="breadcrumb">
<li><a href="#"><span class="icon icon-home"> </span></a></li>
<li><a href="#"><span class="icon icon-beaker"> </span> Projects</a></li>
<li><a href="#"><span class="icon icon-double-angle-right"></span> Breadcrumb</a></li>
<li><a href="#"><span class="icon icon-rocket"> </span> Getting started</a></li>
<li><a href="#"><span class="icon icon-arrow-down"> </span> Download</a></li>
</ul>
// NO js :)
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@import "compass/css3";
$blue-gray : #34495e;
$blue-gray-darken : #2c3e50;
$blue : #3498db;
$blue-darken : #2980b9;
$green : #1abc9c;
$green-darken : #16a085;
*{
margin: 0;
padding: 0;
@include box-sizing(border-box);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
}
body{
text-align: center;
background-color: $blue-gray;
}
h1{
font-weight:100;
font-size:32px;
padding:40px;
color:#fff;
}
#breadcrumb{
list-style:none;
display: inline-block;
.icon{
font-size: 14px;
}
li{
float:left;
a{
color:#FFF;
display:block;
background: $blue;
text-decoration: none;
position:relative;
height: 40px;
line-height:40px;
padding: 0 10px 0 5px;
text-align: center;
margin-right: 23px;
}
&:nth-child(even){
a{
background-color: $blue-darken;
&:before{
border-color:$blue-darken;
border-left-color:transparent;
}
&:after{
border-left-color:$blue-darken;
}
}
}
&:first-child{
a{
padding-left:15px;
@include border-radius(4px 0 0 4px);
&:before{
border:none;
}
}
}
&:last-child{
a{
padding-right:15px;
@include border-radius(0 4px 4px 0);
&:after{
border:none;
}
}
}
a{
&:before,
&:after{
content: "";
position:absolute;
top: 0;
border:0 solid $blue;
border-width:20px 10px;
width: 0;
height: 0;
}
&:before{
left:-20px;
border-left-color:transparent;
}
&:after{
left:100%;
border-color:transparent;
border-left-color:$blue;
}
&:hover{
background-color: $green;
&:before{
border-color:$green;
border-left-color:transparent;
}
&:after{
border-left-color:$green;
}
}
&:active{
background-color: $green-darken;
&:before{
border-color:$green-darken;
border-left-color:transparent;
}
&:after{
border-left-color:$green-darken;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.