CODEWITHSUNDEEP
jquerytwitter-bootstraptogglemegamenu
Porcellino80
Porcellino80

Reputation: 447

Mega drop down menu onhover flickering

I've got a problem with a mega drop down menu that I found online. It is perfect for my purpose but it acts weird sometimes and it has a flickering and flashing problem. The link where I found it is here: http://bootsnipp.com/snippets/featured/mega-menu-slide-down-on-hover-with-carousel . The author already knows that problem, but essentially it could work just fine for mobile if it will be hide. On desktop version I think is a really good idea and I'm using on a website that I build: http://napoleon.larchedigitalmedia.com/.

The problem as I told you before is the flirking and I guess that the problem is here in jquery:

$(".dropdown").hover(            
    function() {
      $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
      $(this).toggleClass('open');        
    },
    function() {
      $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
      $(this).toggleClass('open');       
    });

I don't understand if it is a bootstrap problem (bootstrap use mostly an onclick event for the mega drop down menu) or the problem is in this snippet. Essentially the class open is added (toggle) too fast to a div and sometimes it is applied to two divs at the same times. Could anyone help me to fix this problem?

Upvotes: 2

Views: 1913

Answers (2)

Sehdev
Sehdev

Reputation: 5662

This occurs due to hover event. Just change the hover event to mouseenter and mouseleave to resolve this problem.

Change this

   $(".dropdown").hover(            
       // content here
   );

To

$(".dropdown").mouseenter(            
  function() {
    $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideDown("400");
    $(this).toggleClass('open');        
  },
);

$(".dropdown").mouseleave(            
  function() {
    $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideDown("400");
    $(this).toggleClass('open');        
  },
);

Hope this will help!

Upvotes: 1

François Vandal
François Vandal

Reputation: 44

As far as I can see, in your project, the animation doesn't have time to finish and JS is trying to animate both at the same time. I just changed a little bit of your code and the flickering stops.

$(".dropdown").hover(            
function() {
  $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideDown("400");
  $(this).toggleClass('open');        
},
function() {
  $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideUp("400");
  $(this).toggleClass('open');       
});

Just by changing the second parameter of the stop() function, the animation executes itself. If you want more info, there is always the Jquery documentation on the fuction.

Upvotes: 4

Related Questions