• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

• IE5+: IE 5 and above
• FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
• Opr7+: Opera 7 and above.

Mar 25th, 13': Menu optimized for consistent mobile browsers experience. Only .js file updated.

Description: Drop Down Tabs is a horizontal CSS tabs menu that supports a second level drop down menu for each of its tabs. The entire interface is rendered in plain HTML, making the script very easy to customize, plus all of its contents are search engine friendly. You can optionally set which tab should be selected by default when the page loads (ie: 1st tab, 2nd tab etc), or have the script automatically select a tab when the page loads based on a match between the current page's URL and one of the menu tabs'. If there is a match, that tab is selected.

Drop Down Tabs comes with 5 sleek examples to let you quickly pick your favourite to use on your site. Customize each example's CSS to modify the look as desired. We got you covered alright!

See also: DD Tab Menu (5 styles)

Demos:

1) Example 1

Note that the CSS for this menu style requires each menu item be wrapped in an additional tag.

2) Example 2

3) Example 3

Note that the CSS for this menu style requires each menu item be wrapped in an additional tag.

4) Example 4

Note that the CSS for this menu style requires each menu item be wrapped in an additional tag.

5) Example 5

Directions

To get Drop Down Tabs, simply download "dropdowntabs.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:

• dropdowntabsdemo.htm (demo page showing all 5 Tab Menu instances)
• dropdowntabfiles/dropdowntabs.js (core .js file for Drop Down Tabs script)
• dropdowntabfiles/ddcolortabs.css (Sample CSS for 1st example menu style)

Customization

Setting up and customizing Drop Down Tabs 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) HTML for the menu tabs:

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 carry a drop down menu (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 drop down menu DIV on the page to show (see below). Tabs that don't carry a "rel" attribute will simple be single level in nature.

2) HTML for drop down menu(s):

The drop down menus associated with the desired tabs above are defined as individual DIV tags on the page. For example:

<!--1st drop down menu --> 
<div id="dropmenu1" class="dropmenudiv">
<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>
"
"

Notice how each DIV carries an arbitrary but unique ID attribute that matches up with the value of the "rel" attribute inside the tab it is to be associated with. The CSS class name is just there to provide styling, and can be modified/ removed as desired.

3) Script to call following the HTML for both of the above to initialize a Tab Menu instance:

Finally, with both parts of a Drop Down Tabs defined, you should call the following script to initialize it on the page:

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 is optional, and 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 *. And that's it!

* Note that the "auto" select tab feature mentioned above is rudimentary and isn't meant to replace directly selecting or using server side scripting to identify which tab corresponds to the current page. It won't account for all possibilities where two URLs are the same. Use it as a convenience and fallback plan!