Download tab menu

Demo | Demo with images

Bookmark and Share

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Put this into your <HEAD> section

Put this into your <BODY> section

Put this into your <BODY> section where you want the menu to appear

Configuration

Create menu items

The menu items are simple <a> tags in the HTML code. You should insert the main menu items as child elements of <div id="mainMenu">. Example:
<div id="mainMenu">
    <a>Products</a>
    <a>Support</a>
    <a>About us</a>
    <a>Download</a>
</div>

These are the main menu items for this menu example

Sub menu items are created as child elements of <div id="submenu">. You have one <div> block for each sub menu. example:
<div id="submenu_1">
     <a href="http://www.dhtmlgoodies.com">Product 1</a>
     <a href="http://www.dhtmlgoodies.com">Product 2</a>
     <a href="http://www.dhtmlgoodies.com">Product 3</a>
</div>

<div id="submenu_1"> indiciates that this are the subitems of the first main menu item.

Javascript configuration

There are three javascript variables you could use to modify how the menu works:

     var menuAlignment = 'left'; // Align menu to the left or right?
     var topMenuSpacer = 15; // Horizontal space(pixels) between the main menu items
     var activateSubOnClick = false; // if true-> Show sub menu items on click, if false, show submenu items onmouseover
     var activeTabIndex = 0; // Index of initial active tab (0 = first tab)
     var rememberActiveTabByCookie = true; // Set it to true if you want to be able to save active tab as cookie

menuAlignment should be set to "left" or "right". It specifies if you want a left-, or right aligned menu.
topMenuSpacer is used to specify horizontal space between each main menu item.
activateSubOnClick indicates if the submenu items should appear when you click on a main menu item, or when you move the mouse over it. The default value of this variable is false, which means that the sub menu items will appear when you move your mouse over the main menu item.
leftAlignSubItems is used if you want to left align the sub menu items. By default they will have their x-coordinate at the same position as the main menu item.
activeTabIndex is used to set which main menu item to that initially should be set active. 0 = first menu item.
rememberActiveTabByCookie determines whether active menu item should be remembered in a cookie or not. This will make the active tab be the same when someone revisit your site as it was when they left it last time.

Initialize the menu

The menu is initialized by by the initMenu() function. This is called as an onload event of your window. If you're allready using an onload event for something else, try to call the initMenu() function manually at the bottom of your HTML file:
<SCRIPT type="text/javascript"> initMenu(); </SCRIPT>

Configure the design

The design of the menu is specified in the CSS(Cascading style sheet). Look at the comments in the style sheet for how to do that.

Changes if you don't use a strict doctype

If you're not using a strict doctype, you have to make a small change to the script. The css rule
#mainMenu a{
     padding-left:5px; /* Spaces at the left of main menu items */
     padding-right:5px; /* Spaces at the right of main menu items */

     /* Don't change these two options */
     position:absolute;
     bottom:-1px;
}

should modified to:
#mainMenu a{
     padding-left:5px; /* Spaces at the left of main menu items */
     padding-right:5px; /* Spaces at the right of main menu items */

     /* Don't change these two options */
     position:absolute;
     bottom:-2px;
}

Image support - top menu items

You can use images in your top menu items to get rounded edges. Look at the second demo where the top menu items got rounded edges. These two images are used there:

If you want to download them, right click on them and select "Save Picture As". Put them in a sub folder called images.

The first image is added to the CSS as background image for the main menus <A> tags. Example:

#mainMenu .activeMenuItem{
  background-image:url('images/tabmenu_left.gif');
  background-position:bottom left;
  background-repeat:no-repeat;
  cursor:pointer;  /* Cursor like a hand when the user moves the mouse over the menu item */
}

Also notice that line-height for #mainMenu a is set to 25px, i.e the same height as the height of the images.

Tip! Copy the CSS from the second demo and use it as a starting point if you want to use images. Open the demo page, right click and select "View source"("View page source" in Firefox). Copy the part between <STYLE type="text/css"> and <STYLE> and paste it into your own HTML file.

The second image is added directly to the HTML code like this:

<div id="mainMenu">
  <a>Products<img src="images/tabmenu_right.gif"></a>
  <a>Support<img src="images/tabmenu_right.gif"></a>
  <a>About us<img src="images/tabmenu_right.gif"></a>
  <a>Download<img src="images/tabmenu_right.gif"></a>
</div>

Browsers

This menu has been tested in

  • IE 5,5, IE 6.0
  • Firefox
  • Opera 7, Opera 8

Update log

  • Nov. 7th, 2005: Added support for background images in top menu
  • September, 2nd, 2006 - Added support for right alignment of menu

Rate this script at Hotscripts.com

If you like my script, please rate it at HotScripts.com

Comments

No one has commented this - be first!

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com