Having a mega menu display a millisecond after mouseover

JavaScript
1

Hi all
Im using Bootstrap (v3) and http://kybarg.github.io/bootstrap-dropdown-hover/ to create a mega menu. Its all working great, however, Id like there to be a slight pause between mouseover and it displaying. Is this possible?
Thanks

2

I think those dropdowns are basically controlled by JS so CSS will interfere with the result.

You can add an animation-delay but then you lose the js animation. Assuming you are using the fadeInDown you could try this.

.fadeInDown{
 animation-delay:1s;
}

However I think the real answer lies in JS and there seems to be a post on SO that covers this problem.

3

Thanks @PaulOB , but I cant see how to make this work with the code from http://kybarg.github.io/bootstrap-dropdown-hover/ . Ive tried the css animation-delay (which didnt do anything, surprisingly) and I cant see where to add the js delay function.

4

Which exact one are you using there’s loads on that page?

Do you have a stand-alone version and not just the documentation page?

5

Hi @PaulOB . Ill try and get a standalone version working by thursday for you. Thanks.

1 Like
6

Hi @PaulOB
Ive uploaded a slimmed down version here: http://www.teignrail.co.uk/mega-menu-dev/
Youll see that when you move your cursor over the nav bar the menu immediately opens. Whereas I want it to open/fade in after a few milliseconds so it doesnt open if the user accidentally moves their mouse over the nav bar.
Thanks

7

Hi you can try something like this for a quick fix.

.open .dropdown-menu{animation:myDelay .8s forwards}
@keyframes myDelay{
    0%{opacity:0;}
    50%{opacity:0;}
    100%{opacity:1;}
}

A better solution would be something like the hoverIntent plugin which tests whether the intent was to hover or just pass by the link in question.

I don’t expect it would be easy to implement into bootstrap though.

1 Like
8

Thanks so much @PaulOB . - Your css works like a charm!
I will look at implementing the hoverintent plugin, but if I cant Ill use your css.

9

Hi!
It seems I need to implement a cleverer solution (ie the hoverintent plugin you suggested). But I cant get the plugin to work with my code. It needs to fire the function that makes the menu appear. It is this that Im having issues with :frowning:

10

What seems to be the problem? What do you want the cleverer solution to do?

I’ll move the thread to the JS forum as I have no idea how to integrate that with bootstrap dropdowns :slight_smile:

Maybe someone else has a better solution for this?

There are some other menus around with delay options.

11

Your css was/is really helpful, but its just delaying the animation (obviously). Initially this looked to work great, but after observing other users, they would be confused why the drop down was being activated a second after they had moved their cursor over the menu.

So I need (for want of a better word) a ‘cleverer’ solution. The hover intent plugin looks like it will do the job. But I just cant get it working with my nav.

Ill have a look at the bootstrap-hover-dropdown link youve included.

Thanks for your help @PaulOB

1 Like
12

I believe the effect is much the same with the hoverIntent plugin although reduced in that it does try to work out if the mouse went directly to the element or passed over it. It still slightly suffered from feeling like it was a slight lag as it needs to check if the mouse has stopped or is slowing down over the element.

It’s one of those things that is hard to reconcile as you lose the responsiveness as soon as you try to ascertain if the mouse passed over or stopped over the element in question. That’s why its sometimes better to fade the element in a little slower as you get immediate feedback but if you hover away its not so jarring.

There’s always a compromise with hover dropdowns which is why I prefer click menus for accessibility.:slight_smile:

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.