Forum Moderators: open
I have a problem with a horizontal javascript menu bar that I am working on. Currently, there is a horizontal main menu. Mousing over any of the items populates a sub-menu (also horizontal). When the mouse moves away from the item, the submenu stays for 3 secs and then disappears. my problem is that if the mouse is moved to another main-menu item within those 3 secs, both submenus are shown and they overlap each other.
here is my current code:
<head>
<script language="javascript" type="text/javascript">
function showNav2(vis){
if (document.all) {
document.all["membership_nav"].style.visibility = vis;
} else {
document.getElementById("membership_nav").style.visibility = vis;
}
}
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/membership/" onMouseOver="showNav2('visible');" onMouseOut="javascript:window.setTimeout('showNav2(\'hidden\')',3000);">Membership</a></li>
</ul>
</div>
<div id="membership_nav" style="visibility:hidden;">
<ul>
<li><a href="individual_membership/">Individual Membership</a></li>
<li><a href="small_business_membership/">¦ Small Business Membership</a></li>
</ul> </div>
</body>
</html>
Please, please help!
Try this script below. It uses a single function to handle all links.
There are two global variables:
cTime, used to hold the window.Timeout() id
curDiv, used to hold the div of the most recently mouseovered menu item
the function showNav() accepts two parameters:
objname, the name of the menu div to be shown/hidden
cdisplay, the display value (either block or none)--this parameter is not really needed since we are always going to set display to block,but available if needed for other purposes
<script language="javascript" type="text/javascript">
<!--
var cTime=''
var curDiv=''
function showNav(objname,cdisplay){
//if there is a selected menu
if(curDiv.length>=1){
//clear the timeout
window.clearTimeout(cTime)
//hide the div
document.getElementById(curDiv).style.display='none'
}
//reset curDiv to the just-selected menu
curDiv=objname
//show or hide current menu
document.getElementById(objname).style.display=cdisplay
}
//-->
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/membership/" onMouseOver="showNav('membership_nav','block');" onMouseOut="javascript:cTime=window.setTimeout('showNav(\'membership_nav\',\'none\')',3000);">Membership</a></li>
<li><a href="/ribbit/" onMouseOver="showNav('ribbit_nav','block');" onMouseOut="javascript:cTime=window.setTimeout('showNav(\'ribbit_nav\',\'none\')',3000);">Ribbit</a></li>
</ul>
</div>
<div id="membership_nav" style="display:none;">
<ul>
<li><a href="individual_membership/">Individual Membership</a></li>
<li><a href="small_business_membership/">¦ Small Business Membership</a></li>
</ul> </div>
<div id="ribbit_nav" style="display:none;">
<ul>
<li><a href="frog/">Frog</a></li>
<li><a href="toad/">¦ Toad</a></li>
</ul> </div>
</body>
</html>
Hope this helps,
ajkimoto
-Bchatterjee
