Creating a pure CSS horizontal navigation bar

The navigation bar was traditionally composed of graphic images arranged in a row of table cells. Now that tables are no longer recommended for positioning any nontabular page content, many Web authors are looking for ways to create navigation bars using structural XHTML markup and CSS formatting.

A simple CSS navigation bar
Perhaps the simplest solution to a CSS-styled text navigation bar is to put all the links in a single line of text, as is done in Example A.

This approach seems logical and straightforward. The problem is that having all the links in a single line of text provides precious little control over spacing around and between the links. So, to avoid crowding the links together, you usually end up inserting pipe (vertical bar) and nonbreaking space characters as spacers.

As the following code shows, the result is hardly the kind of clean, structural markup that we're looking for:
<div id="navbar1">
&nbsp;&nbsp;<a href="link1a.html">Button 1</a> &nbsp;|&nbsp; <a
href="link2a.html ">Button 2</a> &nbsp;|&nbsp; <a href="link3a.html ">
Button 3</a>
</div>

The markup gets even more cluttered if you add <span> tags around each link in order to apply the additional CSS styles that create button backgrounds and rollover effects.

A list-based CSS navigation bar
Another approach to creating a CSS navigation bar is to mark up the links as an unordered list using the <ul> and <li> tags.

Using an unordered list for a navigation bar may seem counterintuitive at first because we're accustomed to thinking of the unordered list as a stacked column of list items, each preceded by a bullet. That doesn't seem to fit the horizontal orientation of a navigation bar.

However, the logical structure of a list as a collection of individual list items is appropriate for the links in a navigation bar; and CSS rules enable you to override the default presentation of the list items to eliminate the bullets and arrange the list items to flow across the page instead of down the page.

With that in mind, let's look at Example B of the CSS styles and XHTML markup for a navigation bar based on an unordered list.

Here's the XHTML markup:
<div id="navbar2">
<ul>
<li><a href="link1.html">Button 1</a></li>
<li><a href="link2.html ">Button 2</a></li>
<li><a href="link3.html ">Button 3</a></li>
</ul>
</div>

Regular readers of this column may recognise this as being the same markup that I've used for other CSS button examples. One of the appealing things about this technique is that the markup is the same for any group of buttons, whether they're stacked in a column to one side of the main body text or arranged horizontally in a navigation bar across the top of the page.

Here's the CSS code that transforms the list of text links into a navigation bar:
div#navbar2 {
    height: 30px;
    width: 100%;
    border-top: solid #000 1px;
    border-bottom: solid #000 1px;
    background-color: #336699;
}
div#navbar2 ul {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #FFF;
    line-height: 30px;
    white-space: nowrap;
}
div#navbar2 li {
    list-style-type: none;
    display: inline;
}
div#navbar2 li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #FFF;
}
div#navbar2 li a:link {
    color: #FFF:
}
div#navbar2 li a:visited {
    color: #CCC;
}
div#navbar2 li a:hover {
    font-weight: bold;
    color: #FFF;
    background-color: #3366FF;
}

The div#navbar2 style sets the dimensions and background color of the div that contains the navigation bar links.

The div#navbar2ul style includes margin and padding declarations to override the default spacing assigned to unordered lists and sets the general text formatting. The white-space:nowrap declaration keeps the list on one horizontal line, even if the browser window is too narrow to display the whole line.

The real secret to this technique is in the div#navbar2li style. The list-style-type:none declaration removes the bullets that normally mark each list item, and the display:inline declaration causes the list items to flow from left-to-right across the page instead of each item appearing in a separate line.

Another key element of this technique is the div#navbar2li a rule. The text-decoration:none declaration removes the underscore that is normal for links, and the padding:7px10px declaration controls the spacing of the links in the navigation bar. The left and right padding controls the horizontal spacing, while the top and bottom padding is needed to make the colored background of the rollover effect (and the clickable area of the button) extend the full height of the navigation bar. You could also add left and right margin values if you want additional space between the buttons.

Finally, the rules for the :link, :visited, and :hover pseudoclasses set the color changes for the rollover effects.

You can use variations of this same basic technique to create many different navigation bar effects, including the popular "folder tab" look.