🍽️Menu: Toggle dropdown on whole menu item
If you want to open sub menu not only but clicking on toggle button but on a whole menu item you need to make the next customization.
Just add the code piece below to the 📂 /assets/js/src/navigation.js file.
/**
* Initializes submenu toggling functionality for menu items with the class '.menu-item--has-toggle > a'
* when the DOM content is fully loaded.
*
* This function selects all menu items with the specified class, adds a click event listener to each,
* prevents the default action of following the href="#" link, toggles the submenu of the clicked menu item's parent node,
* and logs "test" to the console on each click event.
*/
document.addEventListener('DOMContentLoaded', function() {
// Select all menu items with the class .menu-item--has-toggle > a
const menuItems = document.querySelectorAll('.menu-item--has-toggle > a');
// Add event listener to each menu item
menuItems.forEach((item) => {
item.addEventListener('click', function(e) {
e.preventDefault(); // Prevents the default action (e.g., following the href="#" link)
toggleSubMenu(item.parentNode); // Toggle submenu of the clicked menu item's parent node
});
});
});
Last updated