CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
StudioTime
StudioTime

Reputation: 23989

CSS Transition delay display bootstrap 3 menu

In boostrap, menu dropdowns are hidden. On click of the parent the dropdown will show.

I changed this so that the dropdown would show on hover:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

This is all good but because of many dropdown menus on a page, the mouse flying around causes a graphical nightmare at times, so, I want to delay the dropdown showing until the mouse hovers for say 1 second. Meaning the user really wants to see the dropdown and hasn't accidentally run the mouse over it.

I'm trying the following but it has no effect. The dropdown still shows immediately.

ul.dropdown-menu {
    transition: 0s display;
}

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
    transition-delay:1s;
}

Is there way to do this?

Upvotes: 1

Views: 1990

Answers (1)

Ashesh
Ashesh

Reputation: 3599

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
  }, function() {
     jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

http://www.bootply.com/64078

IMO, If people want to see the dropdown, they will click!

Hover dropdowns can be irritating, specially when there are many of them on the same page

Source: Adding a delay on bootstrap dropdown

Upvotes: 1

Related Questions