Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A CSS object for many nav styles
/** the nav object **/
.nav {}
.nav ul { margin-bottom: 0; }
.nav li {
list-style: none;
list-style-image: none;
margin-left:0;
}
/** nav object for horizontal navigations **/
.nav.horizontal ul,
.nav.horizontal li { display: inline; }
/** nav object for horizontal navigations with divider
* 1. divider style
* 2. IE6, IE7 & IE8 content hack
*/
.nav.horizontal.divider li:after,
.lt-ie9 .nav.horizontal.divider li .ie-after {
content: "|"; /* 1. */
padding:0 10px;
display:inline-block;
display:-moz-inline-stack;
zoom: 1;
*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = "|"); /* 2. */
*display:inline;
font-style: normal;
}
.nav.horizontal.divider li:last-child:after,
.lt-ie9 .nav.horizontal.divider li:last-child .ie-after {
content: "";
background: none repeat scroll 0 0 transparent;
padding-left:0;
/* IE6, IE7 & IE8 dont display content Hack ;) */
*color:transparent;
*background-color: transparent;
*font-size: 0;
*line-height: 0;
}
/** nav object for breadcrumb, with divider **/
.nav.breadcrumb li{
display: inline;
margin-left:20px;
}
/**
* 1. divider
* 2. IE6, IE7 & IE8 content hack
*/
.nav.breadcrumb li:after,
.lt-ie9 .nav.breadcrumb li .ie-after {
content: "\25B8"; /* 1. */
display:inline-block;
display:-moz-inline-stack;
zoom: 1;
*display:inline;
*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = "\25B8"); /* 2. */
font-size:1.5em;
font-style: normal;
padding:0 0 0 20px;
vertical-align:middle;
}
.nav.breadcrumb li:last-child:after,
.lt-ie9 .nav.breadcrumb li:last-child .ie-after {
content: "";
/* IE6, IE7 & IE8 dont display content Hack ;) */
*color:transparent;
*background-color: transparent;
*font-size: 0;
*line-height: 0;
}
.nav.breadcrumb li a {color: #2c4460 !important;}
/** nav object for pagination **/
.nav.pagination { margin: 20px 0; }
.nav.pagination ul {
display: inline-block;
display:-moz-inline-stack;
*display: inline;
margin-bottom: 0;
margin-left: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
*zoom: 1;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.nav.pagination ul > li { display: inline; }
/* 1. & 2. override with your color value */
.nav.pagination ul > li > a {
float: left;
padding: 4px 12px;
line-height: 20px;
text-decoration: none;
background-color: #ffffff; /* 1. */
border: 1px solid #dddddd; /* 2. */
border-left-width: 0;
}
.nav.pagination ul > li > a:hover,
.nav.pagination ul > .active > a {
background-color: #f5f5f5;
}
.nav.pagination ul > .active > a {
color: #999999;
cursor: default;
}
/* `IE6, IE7 & IE8 ::after polyfill ============================================= */
.lt-ie9 .nav.horizontal.divider li,
.lt-ie9 .nav.breadcrumb li { zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="ie-after" ); }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment