4

I've built a simple dropdown menu.
The code and demo is here: http://jsfiddle.net/3Lq2d/5/
It looks like this:
menu

Mousing over MENU 1 fades in the Submenus.

It works great, unless you happen to be a spaz and jiggle your mouse around a lot over the menu, in which case it gets stuck in a semi-transparent state.

Using .stop(true,true) fixes the spaz issue, but removes the ability to mouse down from the menu to the submenu. I am using fadeIn/fadeOut to give a slight delay, so when the mouse moves from the menu to the submenu, the submenu stays visible ... stop(true,true) breaks this.

What's the best way to build a fading menu with a slight delay in all the right places?

UPDATE:

I tinkered until total satisfaction, adding delays for hoverintent ... here's the final code: http://jsfiddle.net/3Lq2d/75/

designosis
  • 5,182
  • 1
  • 38
  • 57

1 Answers1

1

Remove both return false;, I believe this is your problem. http://jsfiddle.net/3Lq2d/3/

Also, I suggest you use an unordered list for this instead of divs, it makes more sense and it'll give you less headaches.

Take a look at this tutorial I wrote a while ago http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/

elclanrs
  • 92,861
  • 21
  • 134
  • 171
  • Interesting, that does make it perform better, but the opacity of the popup can still get stuck at nearly invisible. I'll update the jsfiddle. – designosis Feb 04 '12 at 04:08
  • Yeah, for some reason `$('#the_pop').stop().fadeIn('fast');` interrupts itself from fading it in 100%. – designosis Feb 04 '12 at 04:13
  • But changing just that to `$('#the_pop').stop(true,true).fadeIn('fast');` works! Awesome. Thanks for your help! – designosis Feb 04 '12 at 04:14
  • No problem, glad it worked. I recommend doing it with `ul` instead tho. You should accept the answer... – elclanrs Feb 04 '12 at 04:15