Content Aware Navigation

Content-Aware-Navigation.markdown

Content Aware Navigation

This nav bar layout changes from a distributed table-cell layout to a basic inline-block layout if there are more than 6 or more list items therein.

A Pen by Heydon on CodePen.

License.

index.html

<nav role="navigation">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">FAQs</a></li>
    <li><a href="#">a link with a lot of text</a></li>
    <!-- add or remove items -->
  </ul>
</nav>

<nav role="navigation">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">FAQs</a></li>
     <li><a href="#">a link with a lot of text</a></li>
    <li><a href="#">shop</a></li>
    <li><a href="#">endorsements</a></li>
    <!-- add or remove items -->
  </ul>
</nav>

style.css

/* table layout if there are less than 6 items */

nav ul {
  display: table;
  table-layout: fixed;
  width: 100%;
  text-align: center;
  background: #333;
}

nav li {
  list-style: none;
  display: table-cell;
  vertical-align: middle;
  background: #333;
}

nav li + li {
  border-left: 2px solid #000;
}

nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding: 0.75em 1em;
  font-size: 1.25em;
}

nav a:hover, nav a:focus {
  text-decoration: underline;
}

/* inline-block (wrapping) layout if there are 6 or more items */

nav li:nth-last-child(n+6), 
nav li:nth-last-child(n+6) ~ * {
  display: inline-block;
  border: 0;
}

nav li:nth-last-child(n+6) a, 
nav li:nth-last-child(n+6) ~ * a {
  display: inline-block;
  border: 0;
}

/* boring stuff */

body {
  font-size: 20px;
  font-family: sans-serif;
}

nav {
  margin-top: 3em;
}