Changing mega menu to change on hover?

JavaScript
1

Hi there,

I have the following Bootstrap mega menu that is responsive. It works when I click on each of the tabs in the menu, but I would like them to change hovering over them.

Is this possible?

This is the JS I think is controlling the click:

  $(document)
    .on('click.bs.dropdown.data-api', '.dropdown', function (e) { e.stopPropagation() })

Thanks

2

Hi,

You could change this section of code where the class of open has been added dynamically to show the menu to instead use a hover to open the menu.

e.g.
This is the click version:

.open>.dropdown-container>.dropdown-menu, .open>.dropdown-container {display:block}

You could add a hover version like this:

@media (min-width;768px) {
  .dropdown-megamenu:hover .dropdown-container > .dropdown-menu,
  .dropdown-megamenu:hover > .dropdown-container {
    display: block;
  }
}

The problem is that you now have a click menu and a hover menu so there will be conflicts if you have hovered and clicked . There is also the problem that touch devices don’t really understand hover so you need the click menu for touch devices. However some touch devices try to miic hover as a first touch so that a touch does actually open a menu but it won’t hide it. Therefore you will also likely have a conflict with touch devices even with click active as you are getting a touch and a click effect.

It’s very complex which is why bootstrap sticks with a click menu only. I would stick with the click menu but maybe adda hover arrow on the menu item to show there is more to come.

Alternatively (and I don’t like this method much) you could detect with JS if the device is a touch device or not and add an appropriate class to the html element. You can then use this new class to prefix the hover rules so that they only apply to users that can hover. e.g. .can-hover .mymenu{do stuff}.

There is a CSS method but not well supported yet that may have an answer.

3

Thank you for the reply.

The code you suggested works fine.

As you mentioned, there is the issue with click and hover.

I have set the dropdown-container to display: none; so the menu is hidden when the page loads

However, on mobile now, the menus do not drop down/collapse when clicking or hovering

4

You’d need the click menu code (the ‘open’ class that’s added dynamically) for less than 768px.

e.g.


@media (max-width:767px) {
  .dropdown-megamenu.open .dropdown-container > .dropdown-menu,
  .dropdown-megamenu.open > .dropdown-container {
    display: block;
  }
}
1 Like
5

Thank you very much I will try that now :slight_smile:

6

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