Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Easy CSS Tabbed Navigation

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.

Tabbed navigation

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.

The next style that we define is for all list items. The code for this is shown below.

#nav li
{
float: left;
margin-right: 4px;
margin-bottom: 0;
font-family: "verdana";
font-size: 14px;
border: 1px solid #000000;
border-bottom: none;
}

This code styles the properties of the list items, which become the tabs. The important properties here are margin-right, which sets the spacing between the tabs, and the border properties.

Note that here I do use shorthand to set multiple properties for the border. Here, this is not confusing because the properties use different characteristics. The width of the border is set to 1px (pixel), the style is set to "solid", and the color is set to black (hexadecimal code #000000). There's no way to confuse which property sets which characteristic. Also note that I overwrote the border setting for the border-bottom to remove the border at the bottom of the tab.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268