Sandeep's Nook: JavaScript Page

Tab Menu with Link Description or Sublinks

Check out all the tabs above.

This tabbed navigational menu as shown above is similar to the one seen at the Yahoo! News site. But this menu is better as it is loads faster since it has no background images and is also more functional as it has the option for users to have a link description feature or a provision for sublinks under each menu item. This type of tab menu is becoming quite popular lately and so I thought of adding it to my collection so that visitors to this site could get it for free. This menu is fully customizable and so users can add as many tabs as they need.

As shown when you hover the mouse over the "About Us" in the example above, users can put up sublinks in place of the link description.

Author: Sandeep Gangadharan
Home Page: http://www.sivamdesign.com/home/

The script is given below:

This goes in the HEAD of the html file:

<script language="JavaScript" type="text/javascript">



</script>

#theTabMenu li {
 list-style:none;
 margin:0;
 display:inline; }

#theTabMenu li a {
 padding:3px 8px;
 margin-left:4px;
 border:1px solid black;
 background:aqua;
 text-decoration:none; }

#theTabMenu li a:link { color:black; }
#theTabMenu li a:visited { color:black; }

#theTabMenu li a:hover {
 color:black;
 background:white;
 border-color:black;
 border-bottom:1px solid white; }

#theTabMenu li.active {
 padding:3px 8px;
 margin:4px;
 background:white;
 border:1px solid black;
 border-bottom:1px solid white; }

.sublinks {
 border-right:1px black solid;
 border-left:1px black solid;
 border-bottom:1px black solid;
 padding:4px;
 padding-left:10px;
 font-family:verdana,arial,helvetica,sans-serif; font-size:11px; }
</style>

This goes in the BODY of the html file: