0

Hi I have created a jquery megamenu for an ecommerce platform. I have set it up so that when you hover over a li in the top level, all of its siblings ul vanish and the relevant one appears. The problem is if you hover over 'gloves' then 'helmets' very quickly the 'gloves' appears as if there is a delay. Yet, if you go from 'helmets' to 'gloves' very quickly it works fine. any ideas? thanks

here is the jquery code and link to site http://www.firecrestmoto.co.uk/index.php

      // Add controller class to <li> on top level
      $('#menu.accordion ul li ul    li').parent().parent().parent().addClass('parentitem');


      // Hide and show entire category and sub categories at the same time
      $('#menu.accordion a').addClass('menu_closed');
       $('#menu.accordion a').hover(

    function(){
    $(this).addClass('menu_open');
    $(this).siblings('ul').fadeIn();
    $('#menu.accordion ul li ul').show();
    }
    );

      $('ul.parentitem').mouseleave(function(){
$(this).hide();
       });


      // Hover on <li> in the top level menu
    $('#menu.accordion li').hover(function(){
$(this).siblings('li').children('ul.parentitem').hide();
$(this).children('ul.parentitem').css('z-index','10000');
});


        // Leave the main menu div, all submenus disappear
         $('#menu').mouseleave(function(){
$(this).children('li').children('ul').hide();
        });


     // Add controller classes to <li> on each sub level
       $('#menu.accordion').children('li').addClass('topline');
        $('#menu.accordion ul.parentitem').children('li').addClass('finallines');
Paul Elliot
  • 475
  • 2
  • 6
  • 21
  • Works fine for me. Not sure what the issue is. I didn't notice any delay. – jfrej May 23 '12 at 10:17
  • Anyway, there is a lot you can do to improve your jQuery - cache your objects and use chaining to speed things up. But I'm still not sure what is the actual issue. – jfrej May 23 '12 at 10:29
  • cheers. if you hover on any of the menu items that is not helmets and very quickly move to hover over helmets (eg move across the different menu items quickly) the helmets subs appears but then is replaced by the gloves subs. – Paul Elliot May 23 '12 at 11:01
  • thanks for the chaining advice, will see how i can clean it up a bit – Paul Elliot May 23 '12 at 11:02

1 Answers1

1

I think you have too many hover events firing - so if you move your mouse quickly there is a lot going on.

When you hover over a top level menu item, you are hovering over both <a> and <li>, so 

$('#menu.accordion a').hover(

and

$('#menu.accordion li').hover(

will both execute.

Also, jQuery .hover() takes either:

hover( handlerIn(eventObject) , handlerOut(eventObject)  )

or

hover( handlerInOut(eventObject)  )

So in your case you are using handlerInOut because you are using only one function inside hover() - so the function fires when the mouse enters AND when the mouse leaves. That means that when you move in and out a top level navigation item there are four events firing.

Also, note that $('#menu.accordion li') will match not only the top level items, but also every li in the sub-menu, and you are attaching a hover event to each of them. This is way too many events.

So instead of both hovers, try something like this:

$('#menu.accordion').children('li').hover(function(){
        // Add here your code for mouse enter
        $(this).siblings('li').children('ul.parentitem').hide();
        $(this).children('ul.parentitem').css('z-index','10000');
        $(this).find('a').addClass('menu_open');
        $(this).find('ul').fadeIn();
        // I'm not sure what the following is supposed to do...
        // ...you are showing ul in all sub-menus.
        $('#menu.accordion ul li ul').show();
    }, function(){
        // Add here your code for mouse leave
        $(this).find('a').removeClass('menu_open');
        $(this).children('ul.parentitem').css('z-index','0').hide();
    },
);

You might need to adjust and clean up the above code - this is just a general idea.

jfrej
  • 4,548
  • 29
  • 36