Blog

Justified horizontal navigation with liquid layouts

The use of horizontal navigation on web sites has been around for ages, and with the extremely vast differences between browsing resolutions the need to have a site that is liquid is becoming increasingly more important. This presents a problem however, for us standards based coders when we try and combine the two practices.

How do we ensure that our horizontal navigation fits with in our liquid design beyond simply centering it?

Searching the internet I was never able to find a solution, until one day it struck me. So simple, yet I had yet to see it?

Start with foundation

Like any navigation, we will start with a list – after all, navigation is simply a list of pages that you can browse through.

     <ul id="main_nav" >
            <li><a href="index.html">Home</a></li>
            <li><a href="aboutus.html">About us</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="contact.html">Contact us</a></li>
     </ul>

Do it horizontal style!

Dirty headlines aside, a little bit of CSS and we can turn this list into a horizontal navigation!

     #main_nav {
              list-style: none; /* remove the bullets */
              margin: 0; padding: 0; /* no need for margins or padding */
              width: 100% /* important for later */
     }

     #main_nav li {
     float: left; /* we want these to display inline, but we want them block level for later so no display: inline; */
     }

The Easy Effective Touch

This will leave us with a horizontal navigation, and many people will now space out each individual list item with padding and margins and then maybe center align the whole thing. However as the design stretches away from the optimal browser width the navigation looks more and more out of place.

So what we do is count up the amount of items in our navigation, divide 100% by that number and set the width of each LI element to the number we end up with. In this case we have 5 elements, 100/5 = 20. So our code would be then be the following:

     #main_nav li {
     float: left; /* we want these to display inline, but we want them block level for later so no display: inline; */
     width: 20%;
     text-align: center; /* center all text */
     }

Finishing Touches

This will center all the navigational elements equally across the page regardless of browser window width. However many times we want the navigation to line up on the left or right edge (or both!). In which case we can simply assign a class to first or last list item to change the text alignment to left/right.

Examples in motion

This can be done with image replacement as well, and my example of this process is a site I recently worked on redoing (still improving, short deadline!) called Plymouth Green Crossings. Provided you are not on IE6 you can see that all the items stay spaced out properly regardless of window size with out the use of javascript! Voila!

NOTE: In some cases IE6 required a slightly smaller li for one item (19% for the last container for example) or it would drop it to the next line. Maybe related to the 3 pixel jog?