DD Tab Menu II
Note: Updated August 29th, 06. Overhauled CSS of image tabs for easy configuration.
Description: Similar to DD Tab Menu, this second version uses images instead for the tabs themselves. The script creates a standards compliant, 2 level tab menu (can be set to single level as well). Move your mouse over a tab, and additional content appears beneath it. It uses CSS to control all of its appearance, and plain HTML to implement the entire menu markup. Highlights of this script are:
- Standards compliant, with menu tabs and sub contents defined using plain HTML, making customization a breeze.
- Entire menu and its contents search engine friendly.
- Set which menu tab and optional sub content should initially be shown when the page first loads.
- Easily toggle between a two level (default) and single level tabs menu. For the later, the entire second level is hidden, allowing you to use this script simply as basic tab links.
Demo:
Step 1: Insert the below CSS and script into the HEAD section of your page:
The CSS above allows you to control all visual aspects of the tab menu and content in one central location. Read the adjacent comments to change them. A variable within the DHTML script also allow you to configure the menu further.
Step 2: Add the below HTML to where you wish the tab menu to appear on the page:
Step 3: Finally, the script a single image for its interface (which you can change by editing the code of Step 1). Download it below:
More information
The code of Step 2 contains the plain HTML that will render the menu. Structurally it is broken up into two parts:
1) The menu tabs:
<div id="ddimagetabs" class="halfmoon">
<ul>
<li><a href="http://www.dynamicdrive.com"
onMouseover="expandcontent('sc1', this)">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm"
onMouseover="expandcontent('sc2', this)">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/"
onMouseover="expandcontent('sc3', this)">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</span></a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif
Optimizer</a></li>
</ul>
</div>
Each tab is implemented as a list link. Here the first 3 tabs have a sub content associated with them, which you specify by inserting the "onMouseover..." code inside the links' A tag. Read on for more info.
2) The menu contents:
Following the tabs is a DIV that contains the sub contents associated with select tabs above:
<DIV id="tabcontentcontainer"> <div id="sc1" class="tabcontent"> 2nd level content 1 here. </div> <div id="sc2" class="tabcontent"> 2nd level content 2 here. </div> </DIV>
Each sub content is defined by wrapping it inside a DIV with an arbitrary but unique id (ie: sc1), in which this ID should match up with that specified in the "OnMouseover..." code of the tab link above:
<div id="sc1" class="tabcontent"> 2nd level content 1 here. </div>
And that's it!