Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS, Second Edition

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 great—but 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 ...