CSS Based Horizontal Tabs
In this tutorial, we are going to create CSS-based horizontal tabs as shown here.
View live code to see it in action »
Graphics Used
The graphics that we will using for the tabs will be the ones created from the gradient tabs Photoshop tutorial:
Default gradient tab: default_tab.jpg
Default highlighted tab: highlighted_tab.jpg
But instead of using two different graphic files for the two tabs, we combine the default tab and highlighted tab into one graphic as shown.
Combined tab: tabs.jpg
Because the two tab images are on one file, they will load with the single file. This will improve performance due to one less server call to get another graphics file. And it will avoid any "flicker" that may occur if we had to wait for the browser to load a separate image for the hover state.
Skeleton Page
First, we will start out with a skeleton page on to which we will place our tabs to be sitting right on top of the gold nav strip.
The code for this skeleton page looks like ...
You can view the live code here. Doing a browser "view source" on the live code will provide you with the code to copy and paste.
Note that for the sake of simplicity, this tutorial had placed the CSS on the same page embedded in the head section. However, for production code, you should put the CSS in a separate CSS file. Also images will be referenced in the same directory. Again, for production code, they would normally be in a separate directory.
Coding the CSS Based Horizontal Tabs
1. Start by letting the tabs be links in an unordered list...
And we get this ...
2. Because different browsers may have different default margins and paddings for ul's and li's, we set them all to zero first and then we can adjust them later. We give the ul element an id of tabnav and create a CSS rule to select this ul and li's that it contains.
3. In the CSS, we remove the bullets that normally appears in the unordered list. And we remove the underlines that normally occurs in the links for li's.
Now we have something like ...
4. The main characteristic about horizontal css tabs is that they actually be horizontal. We make the list items horizontal by floating the li's. When we float the li's, we need to give it a width. We set the li's to 88px by 23px since that is the size of our graphic image for one tab.
Now the list items are horizontal ...
5. We set the display of the link to be block so that the link will expand to fill the entire width of the li, making the entire tab clickable and not just the text clickable. This is done with the following CSS ...
display:block;
6. We set the background image of link to be the tab graphic. We center align the text. Finally, we stylize the link with a color and font size that is suitable to match the tab graphics...
And we get...
7. Notice that the tabs are much shorter than we would like. In fact, the tab height is only taking up as much height as needed by the text instead of the full 23px height of the tab graphic. Therefore, we move the "height" attribute from the "li" to the "a" selector rule.
And we get ...
8. The text is sitting a little bit too high in relation to the tab graphics, so we add 3px top padding to the link. But when we add padding to the link, remember to decrease the height by the same amount since "height" in CSS is defined as "content height" and does not include any padding.
And now it looks perfect...
9. To create the hover effect where the highlighted tab is displayed when the mouse cursor is over the tab, we add a new CSS rule using the hover pseudo-class where we shift the background image to the left by 88px. Recall that the highlighted tab image is on the right-half of the graphics file and that each tab image is 88px in width.
We also altered the link color upon hover to better constrast with the highlighted tab.
And here is what it looks like if you hover over the home tab...
10. If we want the home tab to stay highlighted because this is the "home" page, then we have to add a class to the "home" link to make it different from the rest of the links. We'll give it the arbitrary class called "selected" and add the CSS selector rule as shown...
11. We want the tabs to be sitting on the gold nav strip, not floating near the top of the page masthead. No problem. With some graphical measurements, we determined that all we need to do is to move the whole tab structure 71px lower. We do so by giving a top margin to the ul element, since the ul element is what contains all the tabs.
And now it looks like...
12. Let's space the horizontal tabs apart by adding 10px right margin to the li element.
And we got our final product that looks like ...