- πΊπΈ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.