HTML5 24-Hour Trainer

Chapter 15. Extending Lists

Lists aren't just for bullets and numbers. With a little bit of CSS styling magic, the standard unordered list can be transformed into a navigation bar, complete with background imagery and interactive states. What's more, a completely different type of list used for definitions is available to the HTML coder. This lesson explores all these facets of lists and more.

UNDERSTANDING WEBSITE NAVIGATION BARS

A navigation bar is typically a series of links to pages in a site, grouped in a horizontal or vertical area. The links can be depicted either as plain text or text with imagery. Modern web designers, for the most part, use unordered lists to create navigation bars for their sites. CSS is often employed to change the appearance of the list to a series of navigation buttons or tabs, as shown in Figure 15-1.

Figure 15-1. FIGURE 15-1

Unordered lists are used as the basis for navigation bar for several reasons.

• First, the links in a navigation bar are essentially a collection of similar items, as are list items.

• Second, if the visitor's browser is incapable of rendering the styled elements, the navigation bar degrades gracefully to a fully functional group of links, which serves the same purpose as the navigation bar.

• Finally, sub-menu items on a navigation bar, which may appear when the main menu item is clicked or hovered over, have an exact parallel in nested list ...