Directions 
To get DD Tab Menu, simply download "ddtabmenu.zip", which contains all the files that make up this menu and its accompanying 5 styles. For your reference, some files included within the zip are shown below:
- ddtabdemos.htm (demo page showing all 5 Tab Menu instances)
- ddtabmenufiles/ddtabmenu.js (core .js file for DD Tab Menu)
- ddtabmenufiles/ddtabmenu.css (Sample CSS for 1st Tab Menu style)
Customization
Setting up and customizing DD Tab Menu is very simple, as the entire menu consist of regular HTML and styled using CSS. Logically it makes sense to think of the menu in the following three parts:
1) Script to call in the HEAD section of your page to initialize a Tab Menu instance:
<script type="text/javascript">
//SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
ddtabmenu.definemenu("ddtabs1", 0) //initialize Tab Menu with ID "ddtabs1" and select 1st tab by default
</script>
The first parameter (highlighted in red) should be the ID of the Menu Tab to initialize once the page has fully loaded. The second parameter lets you set which tab should be selected by default- enter either an integer (0=1st tab, 1=2nd tab etc), or "auto" to have the script try to automatically select the tab that matches the current page's URL.
2) HTML for the menu tabs:
<div id="ddtabs1" class="basictab">
<ul>
<li><a href="http://www.dynamicdrive.com" rel="sc1">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" rel="sc2">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="sc3">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>
</div>
As you can see, the menu tabs is simply an ordinary HTML list wrapped inside a DIV. Give this DIV a unique ID to be used to identify it on the page. The arbitrary class attribute provides the desired style for the tabs. Now, to specify that a particular tab contain a 2nd level content (shown when mouse rolls over tab), just insert the code rel="unique_id" inside its <a> element, where "unique_id" is the ID of the sub content DIV on the page to show (see below). Tabs that don't carry a "rel" attribute will simple be single level in nature.
3) HTML for the 2nd Level Contents
The 2nd level contents associated with particular tabs above are defined as individual DIV tags on the page:
<DIV class="tabcontainer"> <div id="sc1" class="tabcontent"> Sub contents here </div> <div id="sc2" class="tabcontent"> Sub contents here </div> <div id="sc3" class="tabcontent"> Sub contents here </div> </DIV>
Notice how each DIV carries an arbitrary but unique ID attribute that matches up with the value of the "rel" attribute inside the tab menu it is to be associated with. The CSS class names and outermost DIV are just there to provide styling, and can be modified/ removed as desired. And that's it!
discuss this topic to forum
