Forum Moderators: open
for eg. onMouseOver="showNav2()"
When the user moves his mouse out of the link, i need the sub-navigation bar ot disappear. I am thinking of doing this via onmouseout.
I have tried: onmouseout="clear()"
and onmouseout="null"
this is not working, any suggestions?
onmouseout="clear()" will depend on what is in your clear function. You'll need to write a function that undoes whatever the showNav2 function is doing, if you haven't done so already. Without seeing any code, it's hard to answer specifically.
<script language="javascript" type="text/javascript">
function showNav2(){
if (document.all) {
document.all["membership_nav"].style.visibility = "visible"
} else {
document.getElementById("membership_nav").style.visibility = "visible"
}
}
</script>
I have the following in the body: This is the main navigation bar:
<div id="nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/membership/" onmouseOver="showNav2()" onmouseout="WHAT DO I PUT HERE?()">Membership</a></li></ul></div>
This is the sub-menu bar. And this is the div that is revealed by the mouseover... i want to hide it with the mouseout.
<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>
function showNav2(vis){
if (document.all) {
document.all["membership_nav"].style.visibility = vis;
} else {
document.getElementById("membership_nav").style.visibility = vis;
}
}
And then change your link to look like this:
<a href="/membership/" onMouseOver="showNav2('visible');" onMouseOut="showNav2('hidden');">Membership</a>
Just off the top of my head. No testing done.
any other ideas?
here's the code I used to test (no doctype, title etc..) - copy&paste and test again
</html>
<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="showNav2('hidden');">Membership</a></li>
<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>
but there's one problem I see - how should one click the sub-navigation when you hide it onMouseOut?
This hides the sub navigation menu on mouseout.. so the user cannot click on any of the submenu items.
How do I write my code so that the sub menu shows for, say, 5 secs and then disappears?
</html>
<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>
<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>
I just added the "javascript:window.setTimeout('functionname(\'parameters\'), 3000')" - passage;
javascript: tells HTML to execute Javascript-code
window.setTimeout("function()",delay): executes the function after given miliseconds (here it's 3000 miliseconds = 3 sec)
the \' - thingy is needed because you run out of quotes here (doublequote used, singlequote used - what now? - use a backslash+singlequote)
