Open on click instead of hovering

Created on 25 August 2021, about 3 years ago
Updated 6 February 2024, 10 months ago

Hi guys,

Is there an easy way to set the submenus items to show on click instead of hovering?

Thanks,
Dmitry

✨ Feature request
Status

Active

Version

1.3

Component

Miscellaneous

Created by

πŸ‡¦πŸ‡ΊAustralia dmitry.mikhailov

Live updates comments and jobs are added and updated live.
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.

  • πŸ‡ΊπŸ‡ΈUnited States mario.elias

    Can someone guide me on setting up TB Mega Menu to open dropdowns on click instead of hover?
    I am drupal/tb_megamenu Versions : * 3.0.0-alpha2
    Thank you Mario

  • πŸ‡ΊπŸ‡ΈUnited States mario.elias

    I try updating TB Mega Menu JavaScript code for triggering dropdowns with click events instead of hover.
    I have noticed the file modules/contrib/tb_megamenu/js/plugin.js has a hover Event Listeners for Desktop:
    Below appear to be where the original hover functionality for non-touch devices is implemented.

    this.navParent.querySelectorAll('.tbm-item').forEach((element) => {
      element.addEventListener('mouseenter', (event) => {
        if (!_this.isMobile && !_this.hasArrows) {
          _this.showMenu(element, _this.mm_timeout);
        }
      });
    
      element.addEventListener('mouseleave', (event) => {
        if (!_this.isMobile && !_this.hasArrows) {
          _this.hideMenu(element, _this.mm_timeout);
        }
      });
    });

    I tried replacing with Click Event Listeners by replace these mouseenter and mouseleave event listeners with a click event listener. See my change below

    this.navParent.querySelectorAll('.tbm-item').forEach((element) => {
      element.addEventListener('click', (event) => {
        if (!_this.isMobile && !_this.hasArrows) {
          if (element.classList.contains('open')) {
            _this.hideMenu(element, _this.mm_timeout);
          } else {
            _this.showMenu(element, _this.mm_timeout);
          }
        }
      });
    });

    can someone familiar with the code assist.

  • πŸ‡ͺπŸ‡ΈSpain virginiarp

    The challenge at hand is the desire to activate the menu through clicks rather than hovers, while still retaining the functionality of the link in the primary menu items.
    To address this, a suggestion is to incorporate arrows next to items that have subitems. Clicking on these arrows would expand the submenu, while clicking on the main item would direct the user to the associated link.
    This feature is already integrated into the module within Structure/Megamenu by enabling the "submenu arrows" option.

  • πŸ‡ΊπŸ‡ΈUnited States goose2000

    I am working with a University, with their accessibility office, they advised that <button> should open a submenu, and not goto a URL, we have that and is good. But the <button> option should read just the same a the <a> link. In this example it would show (ideally) "Services" and open the submenu. Not an arrow. Then you have something that works for both sighted and visually challenged persons at once.

    I feel this is a weird double implementation, with the the "Submenu arrow" option. We have the two sets of navigation in this implementation <a> and <button>. I am using the Alpha 3.x version.

    <div class="tbm-link-container">
      <a href="/services-2-col" class="tbm-link level-1 tbm-toggle" aria-expanded="false">
                    Services
      </a>
      <button class="tbm-submenu-toggle always-show" aria-expanded="false"><span class="visually-hidden">Toggle submenu</span> 
      </button>
    </div>
    

    Also, TB-MM has done the most for modern accessible menus - thank you.

Production build 0.71.5 2024