One of the simplest and most efficient forms of navigation for a website is the horizontal list of items, separated by the pipe (|) symbol. Unfortunately, marking up a <p> tag with the pipe character in between links is messy and not very accessible. A more efficient method to solve this problem is to use an unordered list to markup the navigation links. We can then use CSS to style the vertical list horizontally and add the appropriate separators.
There are many ways to accomplish the effect we’re going for here, and some result in even cleaner HTML than this example. This example will create a centered, horizontal set of HTML links separated by a vertical bar.
<ul id="navlist">
<li><a href="#">home</a></li></ul>
<li><a href="#">about</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">store</a></li>
<li class="last"><a href="#">contact us</a></li>
Overall, a very clean markup that’s easy to update and maintain. Notice that this markup does not contain the pipe symbol – we’ll add the separator using CSS.
The HTML contains only one id="navlist", so that we can apply styles to this list in particular. It also contains one class="last" that we will use later to eliminate the extra separator.
To convert an unordered list to a horizontal menu requires only a few CSS rules. Let’s take a look:
#navlist li {
display: inline;
padding-right: 0.9em;
padding-left: 0.9em;
border-right: 1px solid #009;
}
We begin by adjusting each <li> to display:inline, which forces the list items to display horizontally and removes the bullet point from the front of each. After adding a little left and right side padding, we replicate the effect of a vertical bar by adding a 1px border to the right side of each list item.
The navbar is horizontal, but it still has an extra right border.
At this point, we have a functional horizontal navbar, but it has an extra right border hanging off of the end. To remove this extra border, I simply created the .last class and assigned it a value of border:none. It’s my least favorite part of the technique because of the extra class markup in the HTML, but I think it’s the best option to ensure that the entire list can be centered.
#navlist li.last {
border: none;
}
#navlist {
font-family: Verdana, Arial, sans-serif;
font-size: 0.8em;
font-weight: bold;
text-align: center;
}
#navlist a {
color: #009;
text-decoration: none;
}
#navlist a:hover {
color: #39F;
text-decoration: underline;
}
The final CSS rules apply text formatting to the list, center the entire list, and ensure link and hover states behave in a suitable manner. These are completely adjustable for your particular needs. For instance, I would most likely choose a smaller font size if I were using this technique for a footer.
The finished horizontal navbar.Our finished navbar behaves consistently across browsers and maintains a very high degree of accessibility, while providing an easy-to-use and visually pleasing navigation scheme.
For a complete example, see Burnt Flesh Coffee House.