< Pete Goodman Web developer >

Labs - Horizontal Navigation List

Saturday 13th September 2008, 13:35

This code quickly turns any unordered list of links into horizontal navigation. These lists of links should semantically be marked up as an unordered list UL element. The following example shows this is possible simply by adding the class of horiznavlist to the parent list element.

It may be necessary to add a class of clearfix in order to correctly position the list, as the containing elements are floated. The first and last elements in the list may also require classes of first and last in order to apply extra styles, such as removing extra padding to either side.


<ul id="sitewidenav" class="horiznavlist clearfix">
	<li id="navvisitors" class="first"><a href="#">Visitors</a></li>
	<li id="navcourses"><a href="#">Courses</a></li>
	<li id="navresearch"><a href="#">Research</a></li>
	<li id="navfaculties"><a href="#">Faculties</a></li>
	<li id="navvacancies" class="last"><a href="#">Job Vacancies</a></li>
</ul>

The CSS code necessary to implement the horiznavlist is fairly straightforward. The classes of first and last are used to remove the default styles from the horiznavlist. It is also necessary to use !important to overwrite any default styles that may have been applied elsewhere in the code, meaning horiznavlist can be applied to any list element.


/*
 * ul --> change | into | horizontal | navigation | links
 */
        ul.horiznavlist { }

        /* float selected element and all other links */
        ul.horiznavlist li {
            display : block;
            float : left;
            padding : 0px 6px 0px 0px;
            border-right : 1px solid #333;
            background : none;
        }

        /* remove left padding from first item in a list */
        ul.horiznavlist li.first {
            padding-left : 0px !important;
        }
        
        /* remove right padding from last item in a list */
        ul.horiznavlist li.last {
            padding-right : 0px !important;
            border-right : 0px !important;
        }

It is easy to use a single vertical separator line, by applying a CSS border as is shown in the example above. However it is just as easy to use a graphic by applying a CSS background image instead.

This is a superior technique to the more commonly seen paragraph text with a pipe character | used to separate links, as it adds semantic meaning and the ability to apply styles to each element, as well as to the list in general.

Comments

  1. joe joe
    Elaborating on the 'clearfix' and 'first' and 'last' would be helpful for beginners. Without seeing a working example (esp for clearfix) one is left wondering what the declaration would look like. 16th August 2010, 23:26 #
  2. Pete G Pete G
    The most comprehensive explanation for clearfix can be found on the Position is Everything website.

    The first and last classes are more simple to explain.

    Adding 'first' will remove the left padding from the first element, allowing it to maintain left alignment with content above and below.

    Adding 'last' will remove the right-hand vertical line that separates all other elements in the list.     29th August 2010, 21:21 #
  3. wedprappY wedprappY
    Guy ... Beautiful ... Amazing ... I'll bookmark your web site and take the feeds additionally I'm happy to seek out a lot of helpful info here in the put up, we want work out more strategies in this regard, thanks for sharing. . . . . . 17th October 2011, 22:34 #

Please feel free to add a comment

Add a comment

Prove you are human*

* denotes a required field.

Email addresses are for verification only, and will not be published

The RECAPTCHA spam protection enables me to differentiate between genuine human comments and computer-generated spam.