0

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!

Improve this question

1 Answer 1

Reset to default
1

You have to customise how TB Mega Menu works.

In your_theme.theme you must add:

function yourtheme_js_alter(&$javascript) {
    $javascript['modules/tb_megamenu/dist/js/frontend.js']['data'] = drupal_get_path('theme', 'your theme') . '/js/frontendcustom.js';
}

In your js folder of your theme you must add a custom file frontendcustom.js. The file is copied from the TB Mega Menu module

Improve this answer
3
  • @Berliner, thanks for your answer. I have now set up the custom file as per your instructions (in this particular case I have done: function yourtheme_js_alter(&$javascript) { $javascript['modules/contrib/we_megamenu/assets/js/we_megamenu_frontend.js']['data'] = drupal_get_path('theme', 'yourtheme') . 'assets/js/frontendcustom.js'; } ) I can see the file, so this is working. But now the question is, what do I need to customise in the frontendcustom.js file so that I solve the opening/closing issue described above?
    – xax
    Commented Feb 8, 2022 at 2:31
  • @xax The answer is from Diego Vintimilla, I just helped with formatting.
    – berliner
    Commented Feb 8, 2022 at 8:27
  • I did type both your names, apparently stack removes the name of the person who answered.. Sorry and thank you @Diego!
    – xax
    Commented Feb 9, 2022 at 9:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.