How to use the 'onmouseover'command to create submenus

onmouseover to create submenus

[bchatterjee]

hi,
i am very new to web development and do not know javascript at all. i need an example of code using the javascript command 'onmouseover'. on my webpage, i have a horizontal nav bar. when the mouse goes over any menu item, i need it to show another horizontal submenu underneath the main one. can anyone help me please?

[Purple Martin]

Your second nav bar should be in a div that's normally hidden (make sure you give it an id):

<div id="nav2" style="visibility:hidden;">your nav links go here</div>

The links in your first nav bar need onMouseOver events that call a JavaScript function:

onMouseOver="showNav2()"

Now you need to write the JavaScript function: put it in script tags inside the document head.

function showNav2(){
if (document.all) {
document.all["nav2"].style.visibility = "visible"
} else {
document.getElementById("nav2").style.visibility = "visible"
}
}

NOTE: document.all works in IE, document.getElementById works in good browsers. Notice the difference in brackets.

That should get you started. You will of course want to hide the second nav at some point, you could adapt the code above and use an onMouseOut event to call a function that hides it.

[bchatterjee]

thank you for the pointers. however i am completely new to javascript. so,if you (or someone else) could give me the complete set of javascript function calls and statements that i would need to embed in my HTML to make this work, i would be very grateful.

[Purple Martin]

I already gave you all the code you need to make the div show - all you have to do is paste it in. Make the effort to work out for yourself exactly where each bit pastes in, that way you'll get some understanding of how it all works.

Then you can work out how to make the div hide - and you won't be completely new to JavaScript any more! Try it, it's easier than you expect.

[bchatterjee]

thank you. i put the code you gave into the html. it works - sort of. I have the following questions:

1. when i mouse over the link in the main nav, the sublinks appear. but then they stay there - how do i make them disappear when the mouse is no longer on the link?

2. i have several links in the main nav. do i need to repeat the code in the header for sub nav2, 3, 4 etc... or is there a way to write it so that all the sub navs work with one script declaration? this is what i have now. (what you gave me :-)
<script language="javascript" type="text/javascript">
function showNav2(){
if (document.all) {
document.all["nav2"].style.visibility = "visible"
} else {
document.getElementById("nav2").style.visibility = "visible"
}
}
</script>