Cut & Paste 2 level horizontal tab menu

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:

JavaScript Reference DOM Reference CSS Reference

JavaScript Tutorials DHTML & CSS Tutorials Web Building tutorials htaccess Tutorial

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:

JavaScript Reference DOM Reference CSS Reference

JavaScript Tutorials DHTML & CSS Tutorials Web Building tutorials htaccess Tutorial

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://javascriptkit.com">Home</a></li>
<li rel="references"><a href="#">References &#9660;</a></li>
</ul>

<div id="references" class="submenustyle">
<a href="http://javascriptkit.com/jsref/">JavaScript Reference</a>
<a href="http://javascriptkit.com/domref/">DOM Reference</a>
<a href="http://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>

CSS Library | JavaScript & DHTML Menus

JavaScript Tools:

Site Info