CSS Transition delay display bootstrap 3 menu

Question

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?

Community · Accepted Answer · 2017-05-23 10:10:00Z

1

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

edited May 23, 2017 at 10:10

CommunityBot

11 silver badge

answered Jul 21, 2014 at 13:30

Ashesh

3,6091 gold badge30 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Transition delay display bootstrap 3 menu

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related