Chapter 11. Improving the User Experience
This chapter describes how to use CSS to present a menu that takes the form of an HTML list . This list is used on the Footbag Freaks site as the main navigation in the upper left portion of each page, as shown in Figure 11-1. While this navigational menu is a bit simplistic in that it doesn't involve dynamically changing menu items sliding elegantly into and out of visibility, it has the clear advantage of being easy to implement without writing JavaScript.
This chapter first looks at how to use CSS to alter the standard appearance of lists. It starts there because lists of links were a fundamental navigation tool on the Web before the reign of table layout took hold. A basic understanding of how to move away from the default list look will help you see how lists can still be used for primary navigation, even on today's design-centric Web.
The techniques in this chapter were inspired by Jeffrey Zeldman's fantastic A List Apart site. The article on applying CSS to lists to create attractive menus was written by Mark Newhouse. As Mark points out, a navigation system is structurally a list of links and therefore HTML lists are the most appropriate markup with which to code them.
With the basics out of the way, this chapter explains how to manipulate the overall appearance of a list, and of items within a list, using CSS when hyperlinks are involved. This is the heart of the matter when it comes to creating the kind of navigational menu I'm describing here.
Often, when we define list-based navigation menus, we need multiple levels of nesting for navigation within portions of the site. This chapter describes how to accomplish that design goal as well.
While the menu constitutes the majority of the chapter's content, I also offer two other user-interface techniques. In one, you'll see how to modify the cursor on the fly. In the other, you'll learn about using fixed backgrounds to create polished-looking designs.
Menu examples in this chapter are taken from the Footbag Freaks site where these tricks are used both in the main navigation menu, and in the list of content on the main page.