|
Easy CSS Tabbed Navigation
By Stephen Bucaro
Tabbed navigation depicts file folder tabs as a metaphor to navigate a
website. The tab images may be static or dynamic. Dynamic tabs display a
rollover effect when you move your mouse pointer over them, and the currently
selected tab will change shade or color.

There are several different ways to construct tabbed navigation. You can use
an html table or list, you can combine this with Cascading Style Sheets (CSS),
or graphic images, or both. In this article I'll provide the code for tabbed
navigation based on a list that uses only CSS, and one that uses CSS combined
with graphic images.
Shown below is the html code for the unordered list used to create the tabbed
navigation. Place this code near the top of your webpage.
<ul id="nav">
<li id="home_tab"><a href="home.htm">Home</a></li>
<li id="about_tab"><a href="about.htm">About</a></li>
<li id="products_tab"><a href="products.htm">Products</a></li>
<li id="contact_tab"><a href="contact.htm">Contact</a></li>
</ul>
Note that each html element opening tag has an id attribute and that each list
item contains a link. Place the CSS code used to style the list in a separate
file named nav.css which will be linked to the webpage by placing the line shown
below into the head section of your webpage.
<link type="text/css" rel="stylesheet" href="nav.css">
The first style that we define is for the list as a whole. The code for this is shown below.
#nav
{
list-style: none;
width: 100%;
height: 38px;
margin: 0;
padding-top: 10px;
padding-right: 0;
padding-bottom: 0;
padding-left: 32px;
background-color: #a040a0;
}
This code styles the properties of the list's background, which becomes the
tabbed navigation bar. The important properties here are the height and padding-
top, which must be set to the correct dimension to place the tabs at the bottom
of the navigation bar.
Note that I'm not using shorthand for setting multiple properties of a selector
in one declaration. In other words, the lines shown below;
padding-top: 10px;
padding-right: 0;
padding-bottom: 0;
padding-left: 32px;
could be replaced with the line shown below;
padding: 10px 0 0 32px;
I feel that in some cases, using such shorthand can be confusing to the beginner.
|