Delay on Mega Menu

JavaScript
1

Hi there - I was wondering what the best way would be to add a delay on my drop down menu. Currently my drop-down is completely CSS. Here is a link to my layout:

http://www.ladyluxeinvitations.com/burl/index.html

I want to ensure that the menu doesn’t disappear when the user moves the mouse diagonally from the menu item to one of the subitems. For example, if they are hovering over Enjoying Burlington and want to go to Fast Facts…currently they need to move the mouse down in to the panel and the move to the right…as opposed to moving straight to Fast Facts on a diagonal line.

I know there is the hoverIntent script but I have no idea how to implement it in to my menu. :confused:

Any guidance would be greatly appreciated!

2

I wouldn’t bother replying if i just read the title…

As lk19 stated:

For example, if they are hovering over Enjoying Burlington and want to go to Fast Facts…currently they need to move the mouse down in to the panel and the move to the right…as opposed to moving straight to Fast Facts on a diagonal line.

…which sounds like the upon loosing focus to the first sub navigation element the menu was closing altogether!

3

No, what is happening is that when you cross over on a diagonal line, it hits the next button messing it up.

Although it did just occur to me that I put the delay on the wrong function. It should be on the DD_out function.

4

SlickAU, do you read the questions, or just the titles? The guy asked for how to do a delay, not if is menu was working or not.

5

Seems to be working OK to me…apart from a few javascript warnings

6

Well, you’re going to have to make your drop down work off Javascript as well for the delay. Here is an example:


<ul>
<li onmouseover="DD(this)" onmouseout="DD_out(this)"><a href="#">TEXT</a>
<ul style="display:none">
  <li><a href="#">TEXT</a></li>
</ul>
</li>
</ul>

Javascript:


<script type="text/javascript">
function DD(li){
setTimeout('',1000);
li.getElementsByTagName('ul')[0].style.display="block";
}
function DD_out(li){
li.getElementsByTagName('ul')[0].style.display="none";
}
</script>

The JS shouldn’t need modified, the HTML of couse will. Just make sure you keep the onmouseover and onmouseout attributes the same placing them where necessary.