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
of code and results in a site that is easily
Figure 2.1. The
designed tab navigation of LanceArmstrong.com illustrates the selected and
states each tab may be in.
Let's zoom in and examine the design elements involved to create the 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
: 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
than the rest adds a
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,
. Given that good design is
(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,
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.
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.