New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Tab Menu

Note: Updated Oct 4th, 05' for persistence (remember last tab selected) feature.

Description: This is an attractive, list based tab menu script. While the menu requires a JavaScript enabled browser to view properly, the menu content is simply regular HTML, making content such as links within search engine friendly.

We know you'll have fun with this menu!

Demo:



Directions Developer's View

Step 1: Insert the below CSS and script into the HEAD section of your page:

Select All

The CSS above allows you to control all visual aspects of the tab menu and content in one central location. A variable within the DHTML script also lets you specify which tab and content should be initially selected when the page loads.

Step 2: Add the below HTML to where you wish the tab menu to appear on the page:

Select All

Information regarding doctype

The code above assumes your page uses a valid doctype declaration. If it doesn't, you'll need to make a minor change to the style sheet for the menu to display correctly:

The css rule:

#mainMenu a{
     padding-left:5px; /* Spaces at the left of main menu items */
     padding-right:5px; /* Spaces at the right of main menu items */

     /* Don't change these two options */
     position:absolute;
     bottom:-1px;
} 

should be modified to:

#mainMenu a{
     padding-left:5px; /* Spaces at the left of main menu items */
     padding-right:5px; /* Spaces at the right of main menu items */

     /* Don't change these two options */
     position:absolute;
     bottom:-2px;
}