Help with 2 level tab menu

Discussion in 'Web Design, HTML And CSS' started by bigalo, Jun 10, 2008.

  1. bigalo

    bigalo New Member

    Joined:
    Jun 10, 2008
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    Hello,

    I'm stuck and would like some help. I have a horizontal tab structure with subtabs. Right now the main tabs are activated onclick and they show their respective subtabs. I would like to add the same functionality to the subtabs so that when they are clicked, the style changes and the clicked subtab shows as active. I would also like to have the cookies applied to the subtabs and subtab contents as well. Can anyone please help?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    	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;	
    	}
    	
    	#mainMenu .activeMenuItem img{
    		position:absolute;
    		bottom:0px;
    		right:0px;
    	}
    		
    	#mainMenu .inactiveMenuItem{		
    		color: #000;
    		cursor:pointer;	
    	}
    	
    	#submenu a{	
    		text-decoration:none;	
    		padding-left:5px;	
    		padding-right:5px;
    		color: #000;	
    		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">
    
    	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;
    		
    
    	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>
    </head>
    <body>
      <!-- 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="javascript:void(0);">Product 1</a> <a href="javascript:void(0);">Product 2</a> <a href="javascript:void(0);">Product 3</a>
        </div>
        <!-- Second sub menu -->
        <div id="submenu_2">
          <a href="javascript:void(0);">Phone</a> <a href="javascript:void(0);">Email</a> <a href="javascript:void(0);">Knowledge base</a>
        </div>
        <!-- Third sub menu -->
        <div id="submenu_3">
          <a href="javascript:void(0);">History</a> <a href="javascript:void(0);">The team</a> <a href="javascript:void(0);">Contact us</a> <a href="javascript:void(0);">Visions</a>
        </div>
        <!-- Fourth sub menu -->
        <div id="submenu_4">
          <a href="javascript:void(0);">Patches</a> <a href="javascript:void(0);">Whitepapers</a> <a href="javascript:void(0);">Tab menu</a> <a href="javascript:void(0);">Color picker</a> <a href="javascript:void(0);">Window scripts</a> <a href="javascript:void(0);">Games</a>
        </div>
      </div>
    </body>
    </html>
    
     
  2. kosstr12

    kosstr12 New Member

    Joined:
    Aug 13, 2008
    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    0
    Honestly, The only way you'll learn this effectively is if you stop using templates and learn CSS/JavaScript, and everything about the languages.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice