DD Tab Menu (5 styles)
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
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!
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.