Drop Down Tab Menu's Information




Over 2000+ free Javascript
at JavaScriptBank.com Website
Sampled by JavaScriptBank.com

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>