erikjung
2/27/2012 - 1:36 AM

UI Pattern: "Horizontal Navigation"

UI Pattern: "Horizontal Navigation"

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}
<link rel=stylesheet href=//erikdavidjung.com/bootstrap.css>

<nav role="navigation">
<ul>
<li><a href="#">This is a link</a></li>
<li class=s-current><a>Active Button</a></li>
<li><a href="#">Lorem link</a></li>
<li><a href="#">Dolor link two</a></li>
<li><a href="#">Here is a link</a></li>
</ul>
</nav>
/**
 * UI Pattern: "Horizontal Navigation"
 */

nav[role=navigation] {
  cursor: default;
}

nav[role=navigation] ul {
  list-style: none;
  overflow: auto;
}

nav[role=navigation] li {
  float: left;
}

nav[role=navigation] li:not(:last-child) {
  margin-right: 1rem;
}

nav[role=navigation] a {
  display: block;
  padding: .5rem 1rem;
}

nav[role=navigation] .s-current a {
  font-weight: bold;
}