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

[bolton]

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

[m3g4p0p]

@bolton

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.

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. ^^

[PaulOB]

@m3g4p0p

on the contrary, they might think it’s broken and hover away if it doesn’t respond immediately

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}
}