Jump to content

Help With Vertical Hover Menu


hybrid kill3r
 Share

Recommended Posts

So, I've been trying to learn JavaScript, but I'm having a bit of trouble with a code I've been trying to get working. It's a vertical hover menu. Basically, a horizontal navigation menu with submenus that appear when you hover over a link. The main menu appears correctly on page load. I hover over a list item with a submenu in it and the submenu appears. But it's about half way down the page from the main menu. Once I mouse-out, the submenu disappears, but so does the main menu. If I hover away from the main menu item with the submenu in it, the main menu remains until I mouse-out from that. I hope I've explained my problem well enough so that you know what I mean. I can't seem to figure out how to fix this.

var menuIds=["navigation"];	    	    function generateMenus(){		    		    for(var i = 0; i < menuIds.length; i++){			    			    var menuLists = document.getElementById(menuIds[i]).getElementsByTagName("ul");			    			    for(var t = 0; t < menuLists.length; t++){				    				    menuLists[t].style.top = menuLists[t].parentNode.offsetHeight + "1px";				    menuLists[t].parentNode.onmouseover = function(){					    					    this.style.zIndex = 100;					    this.getElementsByTagName("ul")[0].style.visibility = "visible";					    this.getElementsByTagName("ul")[0].style.zIndex = 0;					    				    }				    				    menuLists[t].parentNode.onmouseout = function (){					    					    this.style.zIndex = 0;					    this.getElementsByTagName("ul")[0].style.visibility = "hidden";					    this.getElementsByTagName("ul")[0].style.zIndex = 100;					    				    }				    			    }			    		    }		    	    }	    	    if(window.addEventListener){		    		    window.addEventListener("load", generateMenus, false);		    	    } else if(window.attachEvent){		    		    window.attachEvent("onload", generateMenus);		    	    }

#navigation {    background: url(images/navigation_bg.gif) repeat-x;    border-top: #666666;    border-bottom: #333333;    height: 59px;    margin: 0px;    padding: 0px;    text-align: center;    line-height: 59px;}#navigation ul {    margin: 0;    padding: 0;    list-style-type: none;}#navigation ul li {    position: relative;    display: inline-block;    float: left;}#navigation ul li a {    display: bock;    width: 120px;    padding: 2px 8px;    border: 0px;    text-decoration: none;    background: url(images/navigation_item_bg.gif) repeat-y left;    color: #737373;    font-size: 14px;    font-weight: bold;}#navigation ul li ul {    top: 0;    left: 0;    border-top: 1px solid #202020;    position: absolute;    display: block;    visibility: hidden;    zIndex: 100;}#navigation ul li ul li {    display: inline;    float: none;}#navigation ul li ul li a {    width: 160px;    font-weight: bold;    text-decoration: none;    background: #000;    border-width: 0px 1px;}#navigation ul li ul li a:hover {    background: #333333;}

Link to comment
Share on other sites

If the offsetHeight is 100, then when you do this: menuLists[t].style.top = menuLists[t].parentNode.offsetHeight + "1px"; you are setting it to "1001px". You're not adding 1 to the height, you're appending the string "1px" to whatever the height is. Setting the parenNode's zIndex to 0 is probably making it disappear on mouseout.

Link to comment
Share on other sites

It's difficult to guess the problem, it would probably be a good idea to use your browser's developer tools to see what styles are being applied to the element that is disappearing. You can change the styles in the browser to see how the changes affect it.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...