Stylish Semantic Navigation

This article is a guide to creating the most required feature on a website - a stylish navigation menu. The article not only achieves the stylish presentation aspect to the navigation, but also uses the best practices in markup, image replacement and other techniques to provide a powerful navigation which is also accessible and easy to use on any platform.

This is an accessible no-preload roll-over image-replacement technique menu!

Know your best practices

In it’s basic form, a navigation is simply a list of links. This should help you choose the most appropriate element to mark up your navigation; <ul>, this is called semantics. You can read more about semantics from Brainstorms and Raves.

Keeping the idea of semantics in mind, the following markup for a basic menu can be produced:

<div id="navigation">
  <ul>
    <li class="home"><a href="/">Homepage</a></li>
    <li class="about"><a href="/about/">About</a></li>
    <li class="contact"><a href="/contact/">Contact</a></li>
  </ul>
</div>

Although, the containing <div> is superfluous, it adds extra hooks for styling. Also, I have opted to give the list items classes instead of ids. Please read this technique about targeting the navigation for my reasoning behind this.

Choosing your Image Replacement Technique

There are numerous image replacement techniques available each have their pros and cons, but I have chosen the Phark method. You should be able to easily modify the example on this page with which ever technique you choose.

element {
  overflow: hidden;
  width: ##px; height: ##px;
  text-indent: -9999px; font-size: 0; line-height: 0;
  background: url(path/to/image.png) no-repeat 0 0;
}

Because we are applying the Phark image replacement techinque on anchors, which are inline elements, and by default have an underline, we need to add the following rules display: block; and text-decoration: none;

Setting the Rollover

Now for the clever bit (well I think so). Petr Stanicek (aka Pixy) devised a method of using the same image for the different states on rollover elements called Fast Rollovers Without Preload. There are numerous reasons why this is so clever:

• Once the image is loaded, it is loaded for the rollover states - no flicker or preload required.
• Reduces the amount of HTTP requests required - increases the display speed of the page.
• Overall filesize reduced (compared to separate images) - smaller downloads.

This techinque works by moving the simply background image when the element is hovered. This idea can be scaled to allow for multiple elements, as well as including their normal, hovered and active states. This means we can achieve a stylish image-based menu for multiple links using just one image!