Hover Menu Flashes when Clicked

HTML & CSS
1

Hey all,

I have a tricky one here…I have a menu with various subsections that you just hover to get around… however, some users are clicking the menu sections and this causes a flashing bug… can anyone advise on how I can stop this from happening?

camlingroup . com

e.g. click hover over products and then click on low voltage and you will see it causing some sort of conflict, means users cant go beyond this area until they click again.

any advice much appreciated.

Cheers

2

It seems like your custom .hover() handler clashes with the default bootstrap dropdown behavour; it also inverts the hover effect when clicked, since you just .toggle() that open class regardless of whether the dropdown is already open or not. I think the easiest fix would be to use CSS for the hover effect, and the bootstrap JS for the default click behaviour only – i.e.

.dropdown:hover > .dropdown-menu,
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

PS: I have to say that I find applying both hover and click behaviour a bit confusing though… like when you click-open a dropdown, you can still open other dropdowns by hovering them, which looks kinda inconsistent.

2 Likes
3

Is there a way to turn the click off, so that its only hover that works?

4

Sure, simply don’t load the bootstrap dropdown plugin. ;-) If you still need the dropdown plugin somewhere else, you can remove the data-toggle attributes which are the primary interface to control the plugin. Or you can turn off that API programatically as explained in the docs:

$(document).off('.dropdown.data-api')
5

Actually I am just thinking on mobile, click is required to filter down to the sub menus!

Not sure what to do :confused:

6

Get rid of the hover menu as they are an accessibility nightmare. Just use a click menu for everyone as its so much easier to use especially for those with old hand like mine :slight_smile:

2 Likes
7

Thanks

Where do I turn off the hover? All within style.css ? I inspected a hover element on the menu but not sure where to do this.

8

You seem to be using JS to do the hover also. I see this in your custom js file.


//on hover dropdown menu
     $(".navbar-nav>.dropdown").hover(function () {
    $(this).toggleClass("open");
 });

Try removing that and see if it does anything.

It may be that you are also using CSS to do it but try the above first.

1 Like
9

Yes these are the lines I’ve been referring to as well… bootstrap itself supports only click events (and for good reason). :-)

2 Likes
10

Thanks guys, that fixed it!! :smiley:

I owe you guys a beer !!

2 Likes
11

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