Priority Pattern

The priority pattern gets its name from applying several levels of priorities to different links. I've used three levels of priority in this demo by assigning classes of alpha, beta, and gamma to different list items. Alpha links will always be visible and beta and gamma links will be visible as space allows.

Links that aren't shown are hidden behind a "more" link. This "more" link and a corresponding "less" are used to toggle the display of the hidden links. This is done through the use of the :target pseudo selector which matches a hash (#) in the url with an id on the page of the same name.

Clicking the "more" link takes you to #more and the html element has been given an id="more" allowing us to target any thing inside the html element.

The HTML

Here's the html used to create the header of this page.

<div id="header">
  <div class="container">
    <img class="logo" src="images/logo.png" width="252" height="46" />
    <ul id="demo-nav">
      <li class="alpha"><a href="">Back to Post</a></li>
      <li class="alpha"><a href="top-nav.html">Top-Nav</a></li>
      <li class="current alpha"><a href="priority.html">Priority</a></li>
      <li class="alpha"><a href="select.html">Select Menu</a></li>
      <li class="beta"><a href="">Select Menu JS</a></li>
      <li class="beta"><a href="">Beta Link</a></li>
      <li class="gamma"><a href="">Gamma Link</a></li>
      <li class="gamma"><a href="">Gamma Link</a></li>
      <li class="show-more"><a href="#more">more</a></li>
      <li class="show-less"><a href="#">less</a></li>
    </ul>
  </div>
</div>
			

The Default CSS

Here's the css that loads by default.

#header {
  color:#eee;
  background: #2b2726;
  text-align: center;
  padding-bottom: 1em;
}

.logo {
  margin: 1.25em 0;
  width: 200px;
}

#demo-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  font-family: 'helvetica', 'sans-serif';
}

#demo-nav li {display: inline;}
#demo-nav li.current a {color: #7b7776;}

#demo-nav li.beta,
#demo-nav li.gamma,
#demo-nav li.show-less
  {display: none;}

#demo-nav a {
  color:#fff;
  padding: 0.75em;
  text-decoration: none;
  line-height: 2.5;
}

#demo-nav a:hover {text-decoration: underline;}

/* ---- the target pseudo selector ---- */
:target #demo-nav li.beta,
:target #demo-nav li.gamma,
:target #demo-nav li.show-less
	{display: inline;}
	
:target #demo-nav li.show-more {
	display: none;
}
			

The CSS in Media Queires

Here's the css included in media queries.

@media screen and (min-width: 30em) {
  #demo-nav a {padding: 0.75em 1.75em;}
}

@media screen and (min-width: 37.5em) {
  #demo-nav a {padding: 0.75em 1.2em;}
}

@media screen and (min-width: 48em) {
  #header {text-align: left;}
  .logo {float: left;}

  #demo-nav {
    float: left;
    clear: left;
    margin: 1em 0;
   }
		
    #demo-nav li.beta {display: inline;}
    #demo-nav a {padding: 0.75em 1.25em 0.75em 0;}
}

@media screen and (min-width: 64em) {
  #demo-nav a {padding: 0.75em 2.5em 0.75em 0;}
}

@media screen and (min-width: 75em) {
  #demo-nav {clear: none;}	
  #demo-nav a {padding: 1.25em 1.25em 1.25 0;}
  #demo-nav li.gamma {display: inline;}
  #demo-nav li.show-more,
  #demo-nav :target li.show-less
    {display: none;}
}

			

Tips

The priority pattern is probably the least useful of those in this demo. The :target pseudo selector doesn't work on IE8 and below. A javascript solution will be needed to toggle the links. Also the "more" and "less" links won't be located in the same location without extra effort and a lot of vertical space is necessary to show all the links on the smallest of screens.

However this is a workable pattern for when you have too many links to show horizontally on a line or two on small width devices, but enough room to show them all on wider screen displays. It can also be used if the lower priority links aren't necessary in the global navigation (They'd be available in some other way), but are nice to include when space allows.