I'm building a couple of (Drupal 8.9.13 and Drupal 9 based) sites where I use TB Megamenu megamenu module (https://www.drupal.org/project/tb_megamenu) to create the menu. All is working fine on desktop/laptop etc, when I hover over the top menu items the related submenu slides open, when the cursor moves away it folds away again.

On narrow screen/mobile, the menu collapses to a hamburger in header. When I click the hamburger, the menu appears as intended, with the top level (no-clickable) items appearing. When I click each of the top items the related submenu items appear, again as intended.

However, when I then click another submenu trigger, the other submenu opens, but the previously opened submenu stays open as well. Taking up lots of vertical space and pushing parts of the menu off the screen.

What do I need to change to have only ever one submenu open at any one time (i.e. triggering a new submenu closes the one that was opened before)? There is no setting for this in the TB megamenu configuration (drupal module), and no instructions on this in the documentation. I assume I have to add some (java)script either in my theme .js file, or change add something in the TB Megamenu tb-megamenu-frontend.js, most likely an onClick event that runs through all top items with submenus and closes all others but the clicked one?

I had the same issue a long time ago with the Mobile Sliding Menu (see that question and answer. I have tried the javascript that was suggested there (adapting the class names to match my TB menu etc), but it doesn't work here.

I have exactly the same behaviour (of submenus staying open) on all versions of TB megamenu, (from D7 to D8 to D9, various older as well as latest development releases), and would love to find out how to address this..

Many thanks for any help on this!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.