CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapmegamenu
Michael Aix
Michael Aix

Reputation: 48

CSS: Adding a Delay to Submenu Dropdown on Hover (Bootstrap 3 / MegaNavbar 2.2)

Now i am officially desperated. I bought a Script to use a MegaMenu on my Site. The Script is MegaNavBar 2.2 http://preview.codecanyon.net/item/meganavbar-v-220-advanced-mega-menu-for-bootstrap-30/full_screen_preview/8516895?_ga=2.119686542.744579007.1495443523-2131821405.1495443282

I wanted the script to open the submenus on hover, so i configured it as described on the Demo-Page (see above).

This worked fine. But i wanted to add a delay, because its irritating users, if they move the mouse pointer from top to bottom, and everytime the menu is open immediately while hovering.

What i tried:

Is there anybody out there, who can help me with this stuff?

Here is my Bootply: https://www.bootply.com/A50M0Wk9NK

(The assumed css rule is in line 29 of pasted css-code)

Best Regards, Michael

Upvotes: 0

Views: 1756

Answers (1)

Shtut
Shtut

Reputation: 1407

You can try to use Visibility instead of Display, and thus use transitions. e.g.:

div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
  transition-delay:2s;  //set delay here
}

Upvotes: 3

Related Questions