Unhover Intent / MegaMenu disappears too quickly

turbot · August 2016

Dear Team @ BeTheme,

Thank you for a great and versatile theme. At this point - BeTheme is my favourite Wordpress Theme.
I have spent approx 3 months building an advanced site powered by BeTheme / VC.

Now I am facing an issue that I can't resolve or even find the code to adjust.

Summary: I would like to increase the timeout when my mouse stops hovering on a menu item or sub-menu item. Can anyone help me set it up so the sub-menus stay visible for .5-1 second after the mouse moves off? Thanks in advance.

In more detail:

The mega-menu displays instantly when I hover over the parent menu item but disappears instantly if I move the mouse off the parent menu item.

This creates problems with mouse paths.

As I only have one parent menu (like Netflix only has browse), if I move the mouse to the left or right of that (instead of down), the whole mega menu disappears before one of the sub-items can be selected. This creates a frustrating user interface experience.

So I am trying to find a way to set "unhover intent" or set a delay for the menu to disappear when you move the mouse off the mega-menu submenu or parent item, the menu stays visible for 0.5s.

I (don't think) I can use CSS transition because it seems you use Jquery to change the display property of the mega-menu, and the menu switches from display:block to display:none.

The following two pages talk about this problem for menus:

A good explanation about this user interface problem:
http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

An example of a solution - with an unhover intent delay - however, I can't figure out how to apply this to the muffin mega menu.
https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

You guys should code an on-mouse out / unhover intent delay into your mega-menu in the interface.

Details like this are the difference between good themes and the very best themes.

For now, can you advise how I can fix this issue?

Albert · August 2016

Hi,

what you ask for, requires files customization what in reference to Item Support Policy is not allowed. So if you want to modify files and don't know how, you should contact with your web developer. Or if you don’t have any, fell free to contact with our colleagues who offer such service via https://sweetwp.com/ - we strongly recommend those guys as they know BeTheme product very well.

P.S. For all javascripts/timeouts is responsible js/scripts.js file.

Thanks for understanding!

turbot · August 2016

Hi, would it be possible to point me to the line / area that controls the hover behaviour of the mega menu?

Then either I can figure it out or maybe find someone else who can? It is not obvious where the hover visibility toggle takes place?

BTW, you should implement this in a future release. Presently, there are usability issues with this menu based on mouse path.

Many thanks!

Albert · August 2016

We are sorry but like we wrote above, files customization are not allowed. So if you don't know where to look, you need to contact with your web developer who would be responsible for all modification in the future.

Unhover Intent / MegaMenu disappears too quickly

Comments