Skip to content

Instantly share code, notes, and snippets.

@mr-stezz
Created November 7, 2012 14:03
Show Gist options
  • Save mr-stezz/4031785 to your computer and use it in GitHub Desktop.
Save mr-stezz/4031785 to your computer and use it in GitHub Desktop.
breadcrumbs
/* breadcrumbs */
*{padding:0;margin:0;}
body{font:13px/26px sans-serif;}
@media screen and (max-width:983px) {
body{font:13px/24px;}
}
@media screen and (max-width:763px) {
body{font:13px/22px;}
}
@media screen and (max-width:583px) {
body{font:13px/20px;}
}
.row{max-width:75.692em;position:relative;margin:0 auto 0.846em auto;}
.nav{list-style:none;margin:0;}
.nav > li,
.nav > li > a{display:inline-block;*display:block;zoom:1;}
.breadcrumbs > li + li:before{content:"› ";}
.breadcrumbs-path > li + li:before{content:"/ ";}
.breadcrumb > li + li[data-breadcrumb]:before{content:attr(data-breadcrumb)" ";}
.breadcrumb_root{font-weight:bold;}
.breadcrumb-wrapper{background-color:#ddd;border-top:1px solid #dedede;}
.breadcrumb-wrapper > .row,
.breadcrumbs_page{margin-bottom:0;}
.breadcrumb-wrapper > .row{padding:8px 0;}
.breadcrumbs_page{margin-right:48px;}
.breadcrumbs_page a,
.top-of-page{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.breadcrumbs_page a{max-width:80px;font-weight:bold;padding:0 8px;}
.breadcrumbs_page a:hover{max-width:100%;}
.breadcrumbs_page .last a{max-width:none;}
.breadcrumbs_page .home-link{width:20px;background:url(http://st.listers.co.uk/img/icons/breadcrumb-home.png) no-repeat center center;}
.top-of-page{display:block;width:3.077em;height:26px;float:right;background-image:url(http://st.listers.co.uk/img/ui/top-of-page-arrow.png);background-repeat:no-repeat;background-position:center center;}
<div class="breadcrumb-wrapper">
<div class="row">
<a href="#top-of-page" class="top-of-page">top</a>
<ul class="nav breadcrumbs breadcrumbs_page">
<li class="first breadcrumb_root"><a href="" class="home-link"><span>Home</span></a></li>
<li><a href=""><span>Link</span></a></li>
<li><a href=""><span>Link</span></a></li>
<li><a href=""><span>A Really Really Long Link</span></a></li>
<li class="last"><a href=""><span>You Are Here</span></a></li>
</ul>
</div>
</div>
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment