Tab Menu issue

[deathbycheese]

I am attempting to use the code here and it works just great EXCEPT I want the submenu to hide onMouseOut.

Does anyone know where/how to modify the code so this will be true? Or is there a better method?

Thanks in advance,
dbc

[vwphillips]

	<script type="text/javascript">

/***********************************************
* Tab Menu- By Alf Magne Kalleland www.dhtmlgoodies.com
* Script featured and available at Dynamic Drive: http://www.dynamicdrive.com/
* This notice must stay intact for use
***********************************************/

	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 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

	/*
	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(/[^\d]/g,'');
			document.getElementById('submenu_'+theId).style.display='none';
		}


		activeMenuItem = this;
		this.className = 'activeMenuItem';
		var theId = this.id.replace(/[^\d]/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 subMenuObj = document.getElementById('submenu'); //DD added line
		mainMenuObj.style.visibility=subMenuObj.style.visibility="visible" //DD added line
		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(/[^\d]/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);
            MouseOut(menuItems[no],(no+1));
			menuItems[no].style.left = currentLeftPos + 'px';
			currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer;
			if(no==activeTabIndex){
				menuItems[no].className='activeMenuItem';
				activeMenuItem = menuItems[no];
			}else menuItems[no].className='inactiveMenuItem';
			if(!document.all)menuItems[no].style.bottom = '-1px';

		}

		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';
	}

function MouseOut(obj,nu){
 var id = obj.id.replace(/[^\d]/g,''),sub=document.getElementById('submenu_'+id);
 addevt(obj,'mouseout',MseOut,nu);
 addevt(sub,'mouseout',MseOut,nu);
}

function MseOut(e,nu){
 var eobj=(e.relatedTarget)?e.relatedTarget:e.toElement,id;
 while (eobj.parentNode){
  id=eobj.id;
  if (id&&(id=='mainMenuItem'+nu||id=='submenu_'+nu)){
   return;
  }
  eobj=eobj.parentNode;
 }
 document.getElementById('submenu_'+nu).style.display='none';
 document.getElementById('mainMenuItem'+nu).className = 'inactiveMenuItem';
}

function addevt(o,t,f,p){
 if (o.addEventListener) o.addEventListener(t,function(e){ return f(e,p);}, false);
 else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return f(e,p); });
}

	window.onload = initMenu;
	</script>

[deathbycheese]

Hi Vic,

So you added the MouseOut function? I'll give it a shot and let you know how it works.

Thanks!

dbc

[deathbycheese]

Hi again,

Well it still doesn't work for some reason. Here's what I have - including your new functions:

/***********************************************
* Tab Menu- By Alf Magne Kalleland www.dhtmlgoodies.com
* Script featured and available at Dynamic Drive: http://www.dynamicdrive.com/
* This notice must stay intact for use
***********************************************/

//submenu actions
	
	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 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
	
	
	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)); 
	} 
	
	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(/[^\d]/g,'');
			document.getElementById('mainSubNav_'+theId).style.display='none';
		}
		
		activeMenuItem = this;		
		this.className = 'activeMenuItem';
		var theId = this.id.replace(/[^\d]/g,'');
		document.getElementById('mainSubNav_'+theId).style.display='block';
		
		if(rememberActiveTabByCookie){
			Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index: ' + (theId-1),100);
		}
	}
	
	function initMenu()
	{
		var mainNavObj = document.getElementById('mainNav');
		var mainSubNavObj = document.getElementById('mainSubNav'); 
		mainNavObj.style.visibility=mainSubNavObj.style.visibility="visible";
		var menuItems = mainNavObj.getElementsByTagName('A');
		if(document.all){
			mainNavObj.style.visibility = 'hidden';
			document.getElementById('mainSubNav').style.visibility='hidden';
		}		
		if(rememberActiveTabByCookie){
			var cookieValue = Get_Cookie('dhtmlgoodies_tab_menu_tabIndex') + '';
			cookieValue = cookieValue.replace(/[^\d]/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 = 'mainNavItem' + (no+1);
			menuItems[no].style.left = currentLeftPos + 'px';
			currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer; 
			if(no==activeTabIndex){
				menuItems[no].className='activeMenuItem';
				activeMenuItem = menuItems[no];
			}else menuItems[no].className='inactiveMenuItem';
			if(!document.all)menuItems[no].style.bottom = '-1px';
			
		}		
		
		var mainNavLinks = mainNavObj.getElementsByTagName('A');
		
		var subCounter = 1;
		var parentWidth = mainNavObj.offsetWidth;
		while(document.getElementById('mainSubNav_' + subCounter)){
			var subItem = document.getElementById('mainSubNav_' + subCounter);
			
			if(leftAlignSubItems){
				// No action
			}else{							
				var leftPos = mainNavLinks[subCounter-1].offsetLeft;
				document.getElementById('mainSubNav_'+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){
			mainNavObj.style.visibility = 'visible';
			document.getElementById('mainSubNav').style.visibility='visible';
		}		
		document.getElementById('mainSubNav').style.display='block';
	}


	function MouseOut(obj,nu){
 var id = obj.id.replace(/[^\d]/g,''),sub=document.getElementById('mainSubNav_'+id);
 addevt(obj,'mouseout',MseOut,nu);
 addevt(sub,'mouseout',MseOut,nu);
}


function MseOut(e,nu){
 var eobj=(e.relatedTarget)?e.relatedTarget:e.toElement,id;
 while (eobj.parentNode){
  id=eobj.id;
  if (id&&(id=='mainNavItem'+nu||id=='mainSubNav_'+nu)){
   return;
  }
  eobj=eobj.parentNode;
 }
 document.getElementById('mainSubNav_'+nu).style.display='none';
 document.getElementById('mainNavItem'+nu).className = 'inactiveMenuItem';
}

function addevt(o,t,f,p){
 if (o.addEventListener) o.addEventListener(t,function(e){ return f(e,p);}, false);
 else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return f(e,p); });
}

	
	window.onload = initMenu;

Thanks again,
dbc

[vwphillips]

you missed a line I added in the main code

use the complete code I posted

[deathbycheese]

Well, the names were modified to match my site, so it becomes quite a difficult task if I were to directly copy/paste the whole thing then try to change the names again. I was hoping you'd just id the areas that needed changing.

So, I went ahead and re-named the IDs in the whole rest of the site to match this script and now it doesn't work at ALL! arrgghh.

I'm really panicking and can't figure out what's going on. Here's everything I've got:

The HTML

<div id="mainMenu">

<ul>
	<li id="mainMenu_1" class="home"><a href="./index.php">HOME</a></li>
	<li id="mainMenu_2" class="about"><a href="#">ABOUT</a></li>
	<li id="mainMenu_3" class="events"><a href="./calendar.php">EVENTS</a></li>
	<li id="mainMenu_4" class="ministries"><a href="#">MINISTRIES</a></li>
	<li id="mainMenu_5" class="communication longNav"><a href="#">COMMUNICATION</a></li>
</ul>

</div> <!--End mainMenu-->


<div id="submenu">

  <div id="submenu_1"><br /> <!--Home-->
  </div> <!-- End submenu_1-->

  <div id="submenu_2"> <!--About-->
     <ul>
    	<li><a href="./index.php">Our Story</a> &nbsp;&nbsp;&nbsp;</li>
    	<li><a href="./index.php">We Believe</a> &nbsp;&nbsp;&nbsp; </li>
    	<li><a href="./index.php">Leadership &amp; Directors</a> &nbsp;&nbsp;&nbsp; </li>
    	<li><a href="./index.php">Our Mission</a> &nbsp;&nbsp;&nbsp; </li>
    	<li><a href="./index.php">Vision</a> &nbsp;&nbsp;&nbsp; </li>
    </ul>
  </div> <!--End submenu_2-->
  
  <div id="submenu_3"> <!--Events-->     
  </div> <!-- End submenu_3-->
    
  <div id="submenu_4"> <!--Ministries-->  
    <ul>
    	<li><a href="./ministry_Worship.php">Worship</a> &nbsp;&nbsp;&nbsp;</li>
    	<li><a href="./ministry_Prayer.php">Prayer</a> &nbsp;&nbsp;&nbsp; </li>
    	<li><a href="./ministry_Men.php">Men</a> &nbsp;&nbsp;&nbsp; </li>
    	<li><a href="./ministry_Women.php">Women</a> &nbsp;&nbsp;&nbsp; </li>
    	<li><a href="./ministry_Youth.php">Youth</a> &nbsp;&nbsp;&nbsp; </li>
    	<li><a href="./index.php">Children</a> &nbsp;&nbsp;&nbsp; </li>
    	<li><a href="./index.php">Care &amp; Hospitality</a> </li>
    </ul>
  </div> <!--End submenu_4-->
  
  <div id="submenu_5"> <!--Communication-->    
     <ul>
    	<li><a href="./index.php">Podcasts</a> &nbsp;&nbsp;&nbsp;</li>
    	<li><a href="./index.php">Weekly Bulletin</a> &nbsp;&nbsp;&nbsp; </li>
    </ul>
  </div> <!--End submenu_5-->

</div> <!--End submenu-->

The CSS

#mainMenu ul {
	width: 600px;
	height: 37px;
	margin: 0px;
	padding: 0px;
	list-style: none;
	float: right;
}

#mainMenu ul li {
	font-family: verdana;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
	float: left;
}

#mainMenu ul li a {
	width: 120px;
	height: 37px;
	font-family: verdana;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	line-height: 55px;
	color: #ffffff;
	background: url(../images/mainNavTab.png) no-repeat left center;
	display: block;
}

#mainMenu ul li a:hover{
	background: url(../images/mainNavTab.png) no-repeat right center;	
}

#mainMenu ul li a:active{
	background: url(../images/mainNavTab.png) no-repeat right center;	
}

#home #mainMenu .home a, #about #mainMenu .about a, #events #mainMenu .events a, #ministries #mainMenu .ministries a, #communication #mainMenu .communication a {
	background-position: right center;
	cursor: pointer;
}

.longNav {letter-spacing:-.04em;}

#submenu {
	visibility: hidden;
}

#submenu ul {
  width: 600px ;
	height: 20px;
	margin: 0px;
	margin-top: 2px;
	padding: 0px;
	list-style: none;
	float: right;
}

#submenu ul li {
	font-family: verdana;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
	float: left;
}

#submenu ul li a {
	height: 20px;
	margin: 0px 15px 0px 15px ;
	font-family: verdana;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	line-height: 30px;
	color: #ffffff;
	display: block;
}

#submenu ul li a:hover{
	color: #8fcf38; /*---green---*/
}

/*------------End Navigation----------------------*/

The JS is exactly as it is in your script, so I didn't include it here.

I really do appreciate you taking the time to help.

I just hope someone can spot the error!

Thanks.
dbc

[vwphillips]

I tested your HTML and CSS with the script I post and apart from CSS problems with the select lists the mouseout function works

post a link to your page

[deathbycheese]

Yeah, the CSS has more to it (other linked style sheets).

However, I have done a direct copy/paste of your entire code into my JS and it stops the onhover altogether. It doesn't even work on click.

Not sure what's going on here...

dbc

[deathbycheese]

Oh, the site is on my localhost at this time because I'm still developing it. I'll push it up in a bit and post a link.

dbc

[deathbycheese]

Here you go!

http://www.heritagechurch.us/Sandbox/index.php

I had to revert to the JS without your onmouseout function because it wouldn't work at all - none of the submenus would show up.

Thanks,
dbc