FF1+ IE5+ Opr7+

Mouseover Tabs Menu

Author: Dynamic Drive

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:

  • The sub menu contents are defined inside an external file and fetched via Ajax when the page loads. This makes it easy to modify this content from a centralized location. The external file is fully accessible by search engines thanks to the way it's specified- as a normal link inside the sub menu DIV.

  • Supports two ways of setting which tab should be selected by default when the page loads: either directly within the HTML itself, or by passing a URL parameter from the previous page to the current page that contains the menu (ie: target.htm?tabmenuid=selectedtabid). The later option makes it possible for a link on a previous page to dictate which tab on the target page is selected when the user arrives from one to the next.

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

Demo:

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


Directions Developer's View

Step 1: Add the below code to the HEAD section of your page:

Select All

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:

Select All

More information

The HTML structure of Mouseover Tabs Menu consist of 3 parts:

The Top Level Tabs

<div id="mytabsmenu" class="tabsmenuclass">
<ul>
<li><a href="http://www.javascriptkit.com" rel="gotsubmenu[selected]">JavaScript Kit</a></li>
<li><a href="http://www.cssdrive.com" rel="gotsubmenu">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">No Sub Menu</a></li>
</ul>
</div>

For the tabs, give its parent container a unique ID attribute, then for all the individual tabs that contain sub menu contents, a rel="gotsubmenu" attribute. If you want a certain tab to be selected automatically when the page loads, use the attribute rel="gotsubmenu[selected]" instead (More on this in "Two ways to set the default tab selected").

A corresponding sub menu container DIV:

div id="mysubmenuarea" class="tabsmenucontentclass">

<!--1st link within submenu container should point to the external submenu contents file-->
<a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>

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

Script initialization call (at the very end):

<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)

</script>

Following both the tabs and the sub menu container, call the function mouseovertabsmenu() to jump start the menu. The second Boolean (true/false) parameter lets you set whether the sub menu contents should disappear when the mouse rolls out of the sub menu container. Setting it to false means they won't.

Structure of the external file

The external file contains all sub menu contents of all the tabs carrying a rel="gotsubmenu" attribute. If you have 3 such tabs, you would have 3 sub menu contents defined in this file. Each content should be wrapped around a DIV with class="tabsmenucontent", for example:

<!--Contents of submenucontents.htm-->

<div class="tabsmenucontent">
<ul>
<li><a href="http://www.javascriptkit.com">Home</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/">JS Tutorials</a></li>
</ul>
</div>

<div class="tabsmenucontent">
<ul>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Designs</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">News</a></li>
</ul>
</div>

2 ways to set the default tab selected when the page loads

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 rel="gotsubmenu[selected]" declaration instead of the usual rel="gotsubmenu":

<div id="mytabsmenu" class="tabsmenuclass">
<ul>
<li><a href="http://www.javascriptkit.com" rel="gotsubmenu[selected]">JavaScript Kit</a></li>
<li><a href="http://www.cssdrive.com" rel="gotsubmenu">CSS Drive</a></li>
</ul>
</div>

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>

or:

<a href="target.htm?tabmenuid=selectedtabid">Target Page</a>

where "tabmenuid" is the ID of the Tabs Menu itself, and index or "selecedtabid", either the position of the selected tab relative to its peers (ones with a sub menu), or the ID of this tab, respectively. To illustrate how this works, lets say you have the following Tabs Menu defined on the current page:

<div id="yourtabsmenu" class="tabsmenuclass">
<ul>
<li><a href="http://www.javascriptkit.com" rel="gotsubmenu">JavaScript Kit</a></li>
<li><a href="http://www.cssdrive.com" rel="gotsubmenu" id="cssdrive">CSS Drive</a></li>
</ul>
</div>

<div id="yoursubmenuarea" class="tabsmenucontentclass">

<!--1st link within submenu container should point to the external submenu contents file-->
<a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>

</div>

<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("yourtabsmenu", "yoursubmenuarea", false)

</script>

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.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post