New on DHTMLGoodies.com:

DHTML Chess is now available for WordPress at WordPressChess.com.

Download tab menu

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

	<style type="text/css">
	/***********************************************************************************************
	
	Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com
	
	Get this and other scripts at www.dhtmlgoodies.com
	
	You can use this script freely as long as this copyright message is kept intact.
	
	***********************************************************************************************/
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		margin-top:0px;
					
	}
	.bodyText{
		padding-left:10px;
		padding-right:10px;
		border-top:1px solid #000000;	
	}
	.bodyText p{
		margin-top:5px;
	}
	#mainContainer{
		width:760px;
		height:600px;
		border:1px solid #000000;
		margin:0 auto;
		background-image:url('../../images/heading3.gif');
		background-repeat:no-repeat;
		padding-top:85px;			
	}
	#mainMenu{
		background-color: #FFF;	/* Background color of main menu */
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Fonts of main menu items */
		font-size:0.9em;	/* Font size of main menu items */
		border-bottom:1px solid #000000;	/* Bottom border of main menu */
		height:30px;	/* Height of main menu */
		
		position:relative;	/* Don't change this position attribute */
		
	}
	#mainMenu a{
		padding-left:5px;	/* Spaces at the left of main menu items */
		padding-right:5px;	/* Spaces at the right of main menu items */
		font-weight:bold;
		/* Don't change these two options */
		position:absolute;
		bottom:-1px;	/* Change this value to -2px if you're not using a strict doctype */
	}
	#submenu{		
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font  of sub menu items */
		background-color:#E2EBED;	/* Background color of sub menu items */
		
		width:100%;	/* Don't change this option */
		
	}	
	#submenu div{
		white-space:nowrap;	/* Don't change this option */
		
	}
	/*
	Style attributes of active menu item 
	*/
	#mainMenu .activeMenuItem{
		/* Border options */
		border-left:1px solid #000000;
		border-top:1px solid #000000;
		border-right:1px solid #000000;		
		background-color: #E2EBED;	/* Background color */
		
		cursor:pointer;	/* Cursor like a hand when the user moves the mouse over the menu item */
	}
	
	#mainMenu .activeMenuItem img{
		position:absolute;
		bottom:0px;
		right:0px;
	}
		
	/*
	Style attributes of inactive menu items
	*/
	#mainMenu .inactiveMenuItem{		
		color: #000;	/* Text color */
		cursor:pointer;	/* Cursor like a hand when the user moves the mouse over the menu item */
	}
	
	#submenu a{	
		text-decoration:none;	/* No underline on sub menu items - use text-decoration:underline; if you want the links to be underlined */
		padding-left:5px;	/* Space at the left of each sub menu item */
		padding-right:5px;	/* Space at the right of each sub menu item */
		color: #000;	/* Text color */
		font-size:0.9em; 
	}
	
	#submenu a:hover{
		color: #FF0000;	/* Red color when the user moves the mouse over sub menu items */
	}
	
	</style>
	<script type="text/javascript">
	/************************************************************************************************************
	Copyright (C) October 2005  DTHMLGoodies.com, Alf Magne Kalleland

	This library is free software; you can redistribute it and/or
	modify it under the terms of the GNU Lesser General Public
	License as published by the Free Software Foundation; either
	version 2.1 of the License, or (at your option) any later version.

	This library is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
	Lesser General Public License for more details.

	You should have received a copy of the GNU Lesser General Public
	License along with this library; if not, write to the Free Software
	Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

	Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
	written by Alf Magne Kalleland.

	Alf Magne Kalleland, 2010
	Owner of DHTMLgoodies.com

	************************************************************************************************************/
	var menuAlignment = 'left';	// Align menu to the left or right?		
	var topMenuSpacer = 0; // 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 leftAlignSubItems = false; 	// left align sub items t
	
	var activeMenuItem = false;	// Don't change this option. It should initially be false
	var activeTabIndex = 0;	// Index of initial active tab	(0 = first tab) - If the value below is set to true, it will override this one.
	var rememberActiveTabByCookie = true;	// Set it to true if you want to be able to save active tab as cookie
	
	var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
	var Opera = navigator.userAgent.indexOf('Opera')>=0?true:false;
	var navigatorVersion = navigator.appVersion.replace(/.*?MSIE ([0-9]\.[0-9]).*/g,'$1')/1;
		
	/*
	These cookie functions are downloaded from 
	http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
	*/	
	function Get_Cookie(name) { 
	   var start = document.cookie.indexOf(name+"="); 
	   var len = start+name.length+1; 
	   if ((!start) && (name != document.cookie.substring(0,name.length))) return null; 
	   if (start == -1) return null; 
	   var end = document.cookie.indexOf(";",len); 
	   if (end == -1) end = document.cookie.length; 
	   return unescape(document.cookie.substring(len,end)); 
	} 
	// This function has been slightly modified
	function Set_Cookie(name,value,expires,path,domain,secure) { 
		expires = expires * 60*60*24*1000;
		var today = new Date();
		var expires_date = new Date( today.getTime() + (expires) );
	    var cookieString = name + "=" +escape(value) + 
	       ( (expires) ? ";expires=" + expires_date.toGMTString() : "") + 
	       ( (path) ? ";path=" + path : "") + 
	       ( (domain) ? ";domain=" + domain : "") + 
	       ( (secure) ? ";secure" : ""); 
	    document.cookie = cookieString; 
	}	
	
	function showHide()
	{
		if(activeMenuItem){
			activeMenuItem.className = 'inactiveMenuItem'; 	
			var theId = activeMenuItem.id.replace(/[^0-9]/g,'');
			document.getElementById('submenu_'+theId).style.display='none';
			var img = activeMenuItem.getElementsByTagName('IMG');
			if(img.length>0)img[0].style.display='none';			
		}

		var img = this.getElementsByTagName('IMG');
		if(img.length>0)img[0].style.display='inline';
				
		activeMenuItem = this;		
		this.className = 'activeMenuItem';
		var theId = this.id.replace(/[^0-9]/g,'');
		document.getElementById('submenu_'+theId).style.display='block';
		

				
		if(rememberActiveTabByCookie){
			Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index: ' + (theId-1),100);
		}
	}
	
	function initMenu()
	{
		var mainMenuObj = document.getElementById('mainMenu');
		var menuItems = mainMenuObj.getElementsByTagName('A');
		if(document.all){
			mainMenuObj.style.visibility = 'hidden';
			document.getElementById('submenu').style.visibility='hidden';
		}		
		if(rememberActiveTabByCookie){
			var cookieValue = Get_Cookie('dhtmlgoodies_tab_menu_tabIndex') + '';
			cookieValue = cookieValue.replace(/[^0-9]/g,'');
			if(cookieValue.length>0 && cookieValue<menuItems.length){
				activeTabIndex = cookieValue/1;
			}			
		}
		
		var currentLeftPos = 15;
		for(var no=0;no<menuItems.length;no++){			
			if(activateSubOnClick)menuItems[no].onclick = showHide; else menuItems[no].onmouseover = showHide;
			menuItems[no].id = 'mainMenuItem' + (no+1);
			if(menuAlignment=='left')
				menuItems[no].style.left = currentLeftPos + 'px';
			else
				menuItems[no].style.right = currentLeftPos + 'px';
			currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer; 
			
			var img = menuItems[no].getElementsByTagName('IMG');
			if(img.length>0){
				img[0].style.display='none';
				if(MSIE && !Opera && navigatorVersion<7){
					img[0].style.bottom = '-1px';
					img[0].style.right = '-1px';
				}
			}
						
			if(no==activeTabIndex){
				menuItems[no].className='activeMenuItem';
				activeMenuItem = menuItems[no];
				var img = activeMenuItem.getElementsByTagName('IMG');
				if(img.length>0)img[0].style.display='inline';	
							
			}else menuItems[no].className='inactiveMenuItem';
			if(!document.all)menuItems[no].style.bottom = '-1px';
			if(MSIE && navigatorVersion < 6)menuItems[no].style.bottom = '-2px';
			

		}		
		
		var mainMenuLinks = mainMenuObj.getElementsByTagName('A');
		
		var subCounter = 1;
		var parentWidth = mainMenuObj.offsetWidth;
		while(document.getElementById('submenu_' + subCounter)){
			var subItem = document.getElementById('submenu_' + subCounter);
			
			if(leftAlignSubItems){
				// No action
			}else{							
				var leftPos = mainMenuLinks[subCounter-1].offsetLeft;
				document.getElementById('submenu_'+subCounter).style.paddingLeft =  leftPos + 'px';
				subItem.style.position ='absolute';
				if(subItem.offsetWidth > parentWidth){
					leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth); 	
				}
				subItem.style.paddingLeft =  leftPos + 'px';
				subItem.style.position ='static';
					
				
			}
			if(subCounter==(activeTabIndex+1)){
				subItem.style.display='block';
			}else{
				subItem.style.display='none';
			}
			
			subCounter++;
		}
		if(document.all){
			mainMenuObj.style.visibility = 'visible';
			document.getElementById('submenu').style.visibility='visible';
		}		
		document.getElementById('submenu').style.display='block';
	}
	window.onload = initMenu;	
	</script>

Put this into your <BODY> section

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

<!-- This is the start of the menu -->
<div id="mainMenu">
	<a>Products</a>
	<a>Support</a>
	<a>About us</a>
	<a>Download</a>
</div>
<div id="submenu">
	<!-- The first sub menu -->
	<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>
	<!-- Second sub menu -->
	<div id="submenu_2">
		<a href="http://www.dhtmlgoodies.com">Phone</a>
		<a href="http://www.dhtmlgoodies.com">Email</a>
		<a href="http://www.dhtmlgoodies.com">Knowledge base</a>
	</div>
	<!-- Third sub menu -->
	<div id="submenu_3">
		<a href="http://www.dhtmlgoodies.com">History</a>
		<a href="http://www.dhtmlgoodies.com">The team</a>
		<a href="http://www.dhtmlgoodies.com">Contact us</a>
		<a href="http://www.dhtmlgoodies.com">Visions</a>
	</div>
	<!-- Fourth sub menu -->
	<div id="submenu_4">
		<a href="http://www.dhtmlgoodies.com">Patches</a>
		<a href="http://www.dhtmlgoodies.com">Whitepapers</a>
		<a href="http://www.dhtmlgoodies.com">Tab menu</a>
		<a href="http://www.dhtmlgoodies.com">Color picker</a>
		<a href="http://www.dhtmlgoodies.com">Window scripts</a>
		<a href="http://www.dhtmlgoodies.com">Games</a>

	</div>
</div>

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

Comments

No one has commented this - be first!

Post your comment

Please wait...

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.