Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created May 28, 2018

Embed
What would you like to do?
Tiny CSS3 Round Breadcrumb
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<h1>Tiny CSS3 breadcrumb</h1>
<ul class="breadcrumb">
<li>
<a href="#">
<span class="icon icon-file"></span>
<span class="text">file</span>
</a>
</li>
<li>
<a href="#">
<span class="icon icon-folder-open"></span>
<span class="text">folder</span>
</a>
</li>
<li>
<a href="#">
<span class="icon icon-code"></span>
<span class="text">CSS 3</span>
</a>
</li>
<li>
<a href="#">
<span class="icon icon-beaker"></span>
<span class="text">Lab</span>
</a>
</li>
<li>
<a href="#">
<span class="icon icon-home"></span>
</a>
</li>
</ul>
// NO JS
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@import "compass/css3";
//ul.breadcrumb>li*5>a[href=#]>span.icon+span.text
$green:#65BA99;
$green-dark:#59A386;
$size:50px;
$f-size:14px;
*{
@include box-sizing(border-box);
margin: 0;
padding: 0;
}
body{
padding: 0 100px;
background-color: $green-dark;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: $f-size;
}
h1{
color:lighten($green,5%);
font-weight:400;
padding:50px 0;
}
ul.breadcrumb{
margin-left: $size;
display:inline-block;
list-style:none;
li{
float: right;
padding:$size/10;
background-color: $green-dark;
@include border-radius($size);
position:relative;
margin-left: -$size;
@include transition(all .2s);
margin-top: 3px;
a{
overflow: hidden;
@include border-radius($size);
@include transition(all .2s);
text-decoration: none;
height: $size;
color: darken($green-dark,5%);
background-color: $green;
text-align: center;
min-width: $size;
display: block;
line-height: $size;
padding-left: $size + 2;
padding-right: $size/2 +$size/6;
width: $size;
.icon{
display: inline-block;
}
.text{
display: none;
opacity: 0;
}
&:hover{
width:150px;
background-color: lighten($green,5%);
.text{
display:inline-block;
opacity: 1;
}
}
}
&:last-child{
a{
padding:0;
}
&:hover{
padding: (($size/10) - 2px);
margin-top: 0;
a{
width: $size + 10;
height: $size + 10;
line-height: $size + 10;
}
}
}
}
}
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.