Have megamenu item display on hover instead of click

[toolman]

Hi there,

I have a megamenu that displays when the user clicks on it, but would like it to appear when the user hovers over it.

This is the fiddle I have:

Bootstrap Megamenu - JSFiddle - Code Playground

How can I have it so the menu appears on hover?

Also, for some reason, on my live site, I have to click somewhere else on the page to hide the menu instead of clicking the “megamenu” title again. This works in the fiddle but not on my live site.

Can anyone see anything obvious that could be causing that?

Thanks!

[PaulOB]

@toolman

but would like it to appear when the user hovers over it.

At the simplest level it would be this:

.megamenu:hover .dropdown-menu{
  display:block;
}

Of course you’d need to remove the js for the click or remove the styles that use .show.

However you will then have broken all touch devices as they don’t hover very well. I would stick with the click effect as its much more usable and less frustrating,

@toolman

Also, for some reason, on my live site

Which is where?

[toolman]

Many thanks for the reply. I will have a play around with the hover display.

This is the link to the live site (the navigation I am working on it right at the top)
https://modelindex.co.uk/

[PaulOB]

@toolman

This is the link to the live site (the navigation I am working on it right at the top)

For some reason you are adding a class of show and a class of open to the megamenu. When you click the megamenu link a second time the show class is removed but the open class is still in place because of this css:

.open>.dropdown-menu {
    display: block;
}

If you click the backdrop then the open class is removed and the menu will work as normal for both methods.

You need to locate the script that is adding .open to that menu and stop it?

[toolman]

Thanks for the reply.

I believe the open class is part of a theme file.

Out of interest, is it better to have the menu appear when the user clicks from a UX point of view?

I have added this code:
megamenu:hover .dropdown-menu{ display:block; } }

Which works when the user hovers over, but still have the same issue if the user clicks on the menu and then clicks it again to close.

[PaulOB]

@toolman

Out of interest, is it better to have the menu appear when the user clicks from a UX point of view?

Yes a golden rule is that hover should never be used for anything important now that touch devices are common. Hover drop-down menus have always been low down on the accessibility scale.

@toolman

Which works when the user hovers over, but still have the same issue if the user clicks on the menu

You can’t have both hover and click at the same time because if you click the item you will still be hovering it so it will not disappear because you are hovering it. It’s a very confusing pattern.

This is not the same issue as the second click problem not hiding the menu as that is the result of the open class being added as mentioned. You need to either stop the open class being added or try to override it like this:

.megamenu.open:not(.show) > .dropdown-menu{ display:none; 
}

That’s untested as I’m on a mobile at the moment so will test later when back at the desktop.

[PaulOB]

@PaulOB

.megamenu.open:not(.show) > .dropdown-menu{ display:none; 
}

Also you can’t have two megamenus with the same ids or aria-labelled by values. (check your spelling of megamneu also :)).

[toolman]

Thanks for the reply.

I have decided to use the following:

.megamenu.open:not(.show) > .dropdown-menu{ display:none; } so it is clickable, therefore more user-friendly.

I am not sure if I can remove the .open class so will have to override it.

Thank you for your help!