A Common Approach

I've decided to use the main navigation tabs found at LanceArmstrong.com as an example for two reasons (Figure 2.1). First of all, I'm a fan of Lance Armstrong, but more importantly, the design lends itself to being rebuilt using CSS in a way that will improve its flexibility. The goal here is to use CSS in a creative way that eliminates large chunks of code and results in a site that is easily maintained and scales gracefully.

Figure 2.1. The nicely designed tab navigation of LanceArmstrong.com illustrates the selected and unselected states each tab may be in.

Let's zoom in and examine the design elements involved to create the tabs.

STRONG TABS

There's a subtle detail in these tabs that make them a bit more interesting than just the average border-and-background variety. For each on and off state, the tab itself has a light gradient that repeats at the top of the tab, horizontally, and fades vertically into a solid background color: white for the on state and light yellow for the off state. A single-pixel highlight at the top of the tab that is lighter in shade than the rest adds a slight dimension, as if the light source were coming from the top of the page, down (Figure 2.2).

Figure 2.2. This is a close-up of the design details for each tab state. Notice a subtle highlight at the top of each tab, with the gradient fade used to simulate dimension and light.

Before we go any further, I'd like to point out that the tabs look, well, cool. Given that good design is subjective (you may have a different opinion), we should be able to at least agree that someone spent a good amount of time making the navigation for LanceArmstrong.com attractive and functional. Mission accomplishedand that's why I selected this example.

On LanceArmstrong.com, each tab set is a single image, with selected and unselected states, depending on what page you are viewing. This image also includes the site's logo. Figure 2.3 shows one of the four possible images, viewed all by itself.

Figure 2.3. The entire tab set and logo are contained within a single, large image. The site includes at least three others like this one, highlighting each section.

COMMON ROLLOVERS

The navigation for LanceArmstrong.com does not currently feature any rollover effects, but by including some additional JavaScript and preloading a second set of images, it wouldn't be impossible, although it would require even more code. We add rollover effects to the tab set when we re-create the design in the "A Bulletproof Approach" section a bit further on. But instead of adding more code, images, and JavaScript, we accomplish the rollover with just a few lines of CSS.

So, on the surface, we have a set of navigational tabs that are specially designed to fit the rest of the site's look and feel. Clicking each tab takes you to the main sections of the site, and each tab has a corresponding text label. Good. Now, let's look under the hood, kick the tires, and eventually walk through an alternate way of handling a similar design.