PDA

Click to See Complete Forum and Search --> : Mousing over for submenus, need them to disappear slowly.

Henordra
01-15-2008, 05:49 AM
Hello again,

I've been trying to make a menu with a selection of sub menus work, like the one here http://www.cssplay.co.uk/menus/drop_line.html

I would like to get the sub menus to stay where they are for a few seconds when not hovered over, and then disappear.

I got some code for this in my previous question http://www.webdeveloper.com/forum/showthread.php?t=169863 but this seems a little temperamental. When I'm hovering over the sub menus they still disappear. Can any body help me with this?

Alternately, is there code that will work so that the sub menus stay in place unless I click else where on the page?

Cheers,
Steph
r_sole
01-16-2008, 05:13 AM
I could be wrong but the part here:
<script type="text/javascript">
function delayHide(idMenu) {
var menuID = document.getElementById(idMenu);
menuID.style.display="none";
}
</script>

Should it not be..
<script type="text/javascript">
function delayHide(widMenu) {
var menuID = document.getElementById(widMenu);
menuID.style.display="none";
}
</script>

It seems they forgot the 'w' in the 'widMenu'. Again I could be wrong. Just try that.
Henordra
01-17-2008, 10:28 AM
Cheers for replying.

I've tried playing with that, but I think each of the menus that will have a drop down sub menu needs to have a different letter in front of the 'id'. Otherwise the only one that appears at all is the first one.

Thanks for trying though. :)
r_sole
01-17-2008, 06:52 PM
I think each of the menus that will have a drop down sub menu needs to have a different letter in front of the 'id'. Otherwise the only one that appears at all is the first one.
Oh true, your right. Duh, stupid me.

Well this works. All it is is altered code from the other page, so all the credit goes to TheBearMay:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Delayed Hide</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
function delayHide(idMenu) {
var menuID = document.getElementById(idMenu);
menuID.style.display="none";
}
</script>
</head>

<body>

<div onmouseover="document.getElementById('widMenu').style.display='block'; clearTimeout(timerStatus);">
test
</div>

<div style="display:none" id="widMenu" onmouseout="timerStatus=setTimeout('delayHide(\'widMenu\')',3000);" onmouseover="clearTimeout(timerStatus);">
<a href="">Menu Item 1</a> <a href="">Menu Item 2</a> </div>

<div>test 2</div>

</body>
</html>