Web Design in a Nutshell, 3rd Edition

List-Based Navigation Bars

Horizontal navigation toolbars are a staple of web interface design. Traditionally, they were created with some number of adjacent text links or a line-up of images. Either way, there wasn’t much meaning to their markup in the document source. When you think about it, it makes sense for a list of navigational options to be marked up as a list in the source. With CSS, it is possible to give it the appropriate semantic markup while visually presenting the options as a familiar horizontal bar.

There are two methods for changing a bulleted list into a horizontal navigation bar. The first makes the list items display inline instead of stacked (the default display mode for block elements). The second uses floats to line up the list items and links. Both examples below use this markup for an ordinary unordered (bulleted) list with five list items. Figure 24-15 shows how it looks using the default browser styles.

    <ul id="nav">
        <li><a href="/">Water</a></li>
        <li><a href="/">Fire</a></li>
        <li><a href="/">Air</a></li>
        <li><a href="/">Earth</a></li>
        <li><a href="/">Beyond</a></li>
    </ul>

Figure 24-15. The unstyled list