Keep up to date with Mi-Net

You can look through our FAQ resource here or contact us to speak with an expert.

// Select all level-1 menu items const menuItems = document.querySelectorAll('.ubermenu-item-level-1'); // Apply 'show-me-active' to the first menu item and 'show-me-uber' to its submenu on page load if (menuItems.length > 0) { // Add 'show-me-active' to the first item menuItems[0].classList.add('show-me-active'); // Add 'show-me-uber' to the submenu within the first item (if it exists) const firstSubmenu = menuItems[0].querySelector('.ubermenu-submenu'); if (firstSubmenu) { firstSubmenu.classList.add('show-me-uber'); } } // Set up event listeners for each level-1 menu item menuItems.forEach(item => { item.addEventListener('mouseenter', function() { // Remove 'show-me-uber' class from all submenus document.querySelectorAll('.ubermenu-submenu').forEach(submenu => { submenu.classList.remove('show-me-uber'); }); // Remove 'show-me-active' class from all level-1 items menuItems.forEach(menuItem => { menuItem.classList.remove('show-me-active'); }); // Add 'show-me-active' class to the hovered item this.classList.add('show-me-active'); // Find the submenu within the hovered item and add 'show-me-uber' class const submenu = this.querySelector('.ubermenu-submenu'); if (submenu) { submenu.classList.add('show-me-uber'); } }); }); /* OPEN ONE MENU AT A TIME */ document.addEventListener('DOMContentLoaded', function () { console.log('Script Loaded'); // Check if the script is running const menuItems = document.querySelectorAll('.ubermenu-item-has-children'); // Select parent menu items const subIndicators = document.querySelectorAll('.ubermenu-sub-indicator'); // Select sub-indicators console.log('Sub Indicators:', subIndicators); // Log the sub-indicators to ensure selection is correct // Function to close all menus except the current one function closeOtherMenus(currentMenu) { console.log('Closing all other menus except:', currentMenu); menuItems.forEach(function (menuItem) { if (menuItem !== currentMenu) { console.log('Removing active class from:', menuItem); menuItem.classList.remove('ubermenu-active'); // Remove active class from other menus } }); } // Add click event to each sub-indicator subIndicators.forEach(function (indicator) { console.log('Attaching click event to:', indicator); // Log each sub-indicator being processed indicator.addEventListener('click', function (e) { console.log('Sub-indicator clicked:', this); e.stopPropagation(); // Prevent the event from bubbling to the document const parentMenuItem = this.closest('.ubermenu-item-has-children'); // Find the parent menu item console.log('Parent Menu Item:', parentMenuItem); // Log the parent menu item if (parentMenuItem) { // Check if parentMenuItem is valid if (parentMenuItem.classList.contains('ubermenu-active')) { console.log('Menu is already active, deactivating:', parentMenuItem); parentMenuItem.classList.remove('ubermenu-active'); } else { console.log('Activating menu:', parentMenuItem); closeOtherMenus(parentMenuItem); parentMenuItem.classList.add('ubermenu-active'); } } else { console.log('No parent menu item found.'); } }); }); // Add click event to the document to close menus when clicking outside document.addEventListener('click', function (e) { console.log('Document clicked. Closing all menus.'); // Check if the click is outside the menu if (!e.target.closest('.ubermenu')) { console.log('Click is outside the menu, closing all menus.'); menuItems.forEach(function (menuItem) { menuItem.classList.remove('ubermenu-active'); // Remove active class from all menus }); } }); });