Bookmark to del.icio.us
FF1+ IE5+ Opr7+
Mouseover Tabs Menu
Note (March 25th, 13): Menu optimized for consistent mobile browsers experience. Only .js file changed.
Description: This is a mouseover tabs menu. Move the mouse over designated links, and additional sub menu contents appear in a separate DIV below it. Think of it as an inline two level menu. Specify which tab should be selected when the page loads in two different ways, plus whether the sub menu contents should disappear when the mouse rolls out of that area. A couple of interesting features:
We intentionally made this script with a minimum amount of styling, so you can personalize its look yourself. Note that this script replaces the legacy Tabs Menu (mouseover).
The sub menu contents are set to disappear again when the mouse rolls out of them. You can disable this behaviour (see "Script Initialization" below).
Step 1: Add the below code to the HEAD section of your page:
This code references two required external files, which you can download below:
You should also download the demo external menu contents file for testing purposes:
Step 3: Add the following sample HTML to the BODY of your page, which contains one instance of a Mouseover Tabs Menu:
The HTML structure of Mouseover Tabs Menu consist of 3 parts:
The Top Level Tabs
For the tabs, give its parent container a unique ID attribute,
then for all the individual tabs that contain sub menu contents, a
A corresponding sub menu container DIV:
This is the DIV that will house the sub menu contents for the tabs above. Give it a unique attribute, then add a single hidden link inside it that points to an external file containing the sub menu contents of all the tabs (the structure of this file is explained further below). The script will then dynamically crawl this link and dump the contents- hidden initially- into the sub menu container.
The external file used must reside originate from your own server/domain due to Ajax security limitations. Note, however, that the script supports either relative to absolute URLs to the external file on your server, such as:
<a href="http://www.dynamicdrive.com/dynamicindex1/submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>
Following both the tabs and the sub menu container, call the
The external file contains all sub menu contents of all the tabs carrying a
<!--Contents of submenucontents.htm-->
You can set a tab to be selected automatically when the page loads in two
different ways depending to your needs. The first does this directly within the
HTML of the tabs, by giving the desired tab a
Here all 3 tabs contain a sub menu, though the 1st one will be selected by default.
Instead of hard coding the default selected tab on the page, this second method lets you do this dynamically via a URL parameter string. This enables you to define a link on another page that causes the desired tab on the target page to be selected when the later page loads. This is done by adding to the current page's URL a parameter string specifying which tab you want to be selected. The syntax is:
<a href="target.htm?tabmenuid=index">Target Page</a>
<a href="target.htm?tabmenuid=selectedtabid">Target Page</a>
The following links reloads the current page, but with a different tab selected by default, by adding to the link a different parameter string:
The URL parameter method of default tab selection overrides the 1st HTML method, if both are defined.