• 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.

Updated Feb 23rd, 08: Adds ability for menu to revert back to default selected tab when mouse moves out of menu. Only ddtabmenu.js changed!

Description: DD Tab Menu is a standards compliant, 2 level tab menu. Move your mouse over a tab, and a 2nd level content appears beneath it. The script uses CSS to control all of its appearance, and plain HTML to implement the entire menu tabs and contents. Highlights of this script are:

• Standards compliant, with menu tabs and sub contents defined using plain HTML, making customization a breeze. Five styles to choose from by default, or customize the tabs yourself.
• Entire menu and its contents search engine friendly.
• Set which menu tab should be selected by default when the page loads (ie: 1st tab, 2nd tab etc). If the tab contains a sub content, that content is shown as well.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.
• Ability for the selected tab to either remain with the last tab the user moved his mouse out of, or revert back to the default selected when mouse moves out of menu. New!

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!

See also: Drop Down Tabs (5 styles)

Demos:

1) Example 1

2) Example 2

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

3) Example 3

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 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:

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:

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!

Inside ddtabmenu.js

Near the top of ddtabmenu.js, there are also two variables you can configure:

disabletablinks: false, //Disable hyperlinks in 1st level tabs with sub contents (true or false)?
snap2original: [true, 300], //Should tab revert back to default selected when mouse moves out of menu? ([true/false, delay_millisec]

The first variable sets whether to disable the main tabs themselves from navigating to another page when clicked on (despite them being hyperlinked).

The second variable sets which tab should remain selected when the mouse moves out of the menu. False causes the last tab the user was on before moving out to be selected, while true causes the default selected tab (when the menu first loaded) to be selected once again. When set to true, also specify the time delay before the reverting takes place- practically it should be a number larger than 100.