How to make a mega menu appear after 1 second hover?

Hi all,
I have a mega menu here: http://www.exeter.ac.uk/codebox/dan/exeterV2/final-code/study-home.php
Its working well, but I want a slight pause as you activate the menu. I dont want it to open immediatly as you hove over it. Reason being is that when you visit the page your cursor will be above the mega menu and so you move the mouse down which activate the mega menu. Not a massive issue, but Id rather it didnt do that.
Any ideas?
Thanks

Hi @bolton, I’d assume most users are acquainted enough with mega menus to not hover it by accident… on the contrary, they might think it’s broken and hover away if it doesn’t respond immediately.

But if you must do this, how do you currently open the menu?

Edit: Ah I see it’s bootstrap… well in that case you can’t use the data attribute API any more but have to add the behaviour programmatically. I still don’t think it’s a good idea though. ^^

1 Like

You can delay it with CSS but it makes the menu very clunky :slight_smile as mentioned above.

.dropdown-megamenu.open .dropdown-container{
animation:delay 0s forwards 1s;
opacity:0;
}

@keyframes delay{
from{opacity:0}
to{opacity:1}
}
1 Like