Chapter 2. Scalable Navigation

Provide site navigation that scales to any text size or content amount.

The navigation of a Web site can often be the anchor for its design. It's a page component that is as central and important as any. Traditionally, a Web designer might crack open a favorite image editor and lovingly craft some buttons, tabs, or text to be stuffed inside a few nested <table> elements. Additionally, JavaScript might be used to trigger rollover effects that swap a second set of images. In the end, the result might look greatbut what lurks beneath the surface may not be so desirable, as we'll see by investigating a common approach to building Web site navigation.

Let's take a close look at an example based on the traditional approach to designing stylish, image-based tabs. After we analyze the shortcomings of this particular method, we then wipe the slate clean and construct a similarbut bulletproofdesign using lean, valid markup; three tiny images; and CSS.