Cut & Paste 2 level horizontal tab menu
|
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 ▼</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>
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 ▼</a></li>