how to close one submenu when I open another submenu on mobile?

Created on 19 April 2021, about 3 years ago
Updated 5 April 2024, 3 months ago

Problem

I'm building a couple of (Drupal 8.9.13 and Drupal 9 based) sites where I use TB Megamenu to display 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 (non-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, thatsubmenu opens, but the previously opened submenu stays open as well. This takes up lots of vertical space and pushes 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 ( https://www.drupal.org/project/mmenu → ), which got a solution suggested on stackexchange, see question and answer there. 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!

💬 Support request
Status

Active

Version

3.0

Component

Code

Created by

🇬🇧United Kingdom xax London, UK

Live updates comments and jobs are added and updated live.
  • mobile

    Issue related to Drupal on mobile devices.

  • jQuery

    Affects the version, handling, or usage of the jQuery javascript library.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.69.0 2024