Categories:

Home / Free JavaScripts / Menu and redirection / Here

Cut & Paste 2 level horizontal tab menu

Credit: JavaScript Kit

Description: A CSS based tab menu that supports a secondary level of menu items. Both levels are horizontal, so there no drop down menus that may become hidden underneath form elements in browsers such as IE. Cool!

Example:

Directions:

Step 1: Add the following code to the <head> section of your page:

It references two external files. Download them below (right click, and select "save as"):

Step 2: Add the below HTML to your page, which contain your menu links:

Enjoy!

Configuration info

This menu is entirely HTML based and very easy to configure. I'll use a snippet of the HTML code in Step 2 to explain how to associate a submenu with a tab:

<ul id="maintab" class="basictab">
<li><a href="http://www.javascriptkit.com">Home</a></li>
<li rel="references"><a href="#">References &#9660;</a></li>
</ul>

<div id="references" class="submenustyle">
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
<a href="http://www.javascriptkit.com/domref/">DOM Reference</a>
<a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a>
</div>

<script type="text/javascript">
//initialize tab menu, by passing in ID of UL
initalizetab("maintab")
</script>
As you can see, to associate a submenu with a particular main tab, insert the "rel" attribute inside the tab's LI element with the id of the submenu as its value. At the very end, you'll want to initialize the entire menu by calling "initalizetab()" with the id of the tab menu.

You can also have the contents of a particular submenu displayed automatically when the page loads by adding a CSS class next to the rel attribute:

<li rel="references" class="selected"><a href="#">References &#9660;</a></li>

JavaScript Tools:
Site Info

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.