1) The menu tabs:
<div id="shademenu"
class="shadetabs">
<ul>
<li><a
href="http://www.dynamicdrive.com">Home</a></li>
<li><a
href="#" rel="dropmenu1" rev="testfield">Webmaster</a></li>
<li><a
href="#" rel="dropmenu2">News</a></li>
<li><a
href="#" rel="dropmenu3">Search</a></li>
</ul>
</div>
Each tab is implemented as a list link. Here the last 3 tabs
have a drop down menu associated with it. This is done by using the "rel" attribute and setting it to the ID of the drop
down menu (see below). Notice the 2nd tab, which also carries a "rev" attribute. If defined, the script will
dynamically hide an element (ie: form field) on the page as the tab's drop
down menu is displayed. Set it to the ID of the element to hide.
2) The drop down menus:
Moving on, lets see how to define each drop down menu. The
first drop down menu in the demo looks like this:
<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
As you can see, it's simply a regular DIV with links
contained inside it. By giving it a classname of "dropmenudiv" and an
arbitrary ID that matches up with the "rev" attribute of the tab that will
carry it, it is transformed into a drop down menu.
At the end of your page, you'll want to activate the tab
menu by calling the below code:
<script type="text/javascript">
//tabdropdown.initializetabmenu("tab_menu_id", optional_selected_tab_number)
//ie: tabdropdown.initializetabmenu("tab_menu_id", 2)
tabdropdown.initializetabmenu("shademenu")
</script>
If you want a particular tab selected by default, use the optional 2nd
parameter for that.
Hiding an element (ie: form field) when menu drops down
As already mentioned, you use the "rev" attribute inside a menu tab to
donate which element on the page it should hide when it drops down. The
below code sample shows how the two is defined on the page:
<!-- Menu tab in question-->
<li><a href="#" rel="dropmenu1" rev="testfield">Webmaster</a></li>
<!--Element on page to hide-->
<form id="testform">
Test form field:<br /><input type="text" id="testfield" />
</form>