document.addEventListener("DOMContentLoaded", function () {
const hamburgerToggle = document.getElementById('hamburger-toggle');
const menu = document.getElementById('menu');
const menuItems = document.querySelectorAll('.menu-item');
const submenuItems = document.querySelectorAll('.submenu-item');
// Toggle mobile menu on hamburger button click
hamburgerToggle.addEventListener('click', function () {
menu.classList.toggle('hidden');
});
// Desktop hover interaction for menu items (submenu visibility)
menuItems.forEach(item => {
item.addEventListener('mouseenter', function () {
if (window.innerWidth >= 768) {
const submenu = item.querySelector('.submenu');
if (submenu) {
submenu.classList.remove('hidden');
}
}
});
item.addEventListener('mouseleave', function () {
if (window.innerWidth >= 768) {
const submenu = item.querySelector('.submenu');
if (submenu) {
submenu.classList.add('hidden');
}
}
});
// Mobile click interaction for menu items (submenu toggle visibility)
item.addEventListener('click', function (e) {
if (window.innerWidth <= 768) {
const submenu = item.querySelector('.submenu');
if (submenu) {
submenu.classList.toggle('hidden');
}
// Close all other submenus when one is opened
menuItems.forEach(otherItem => {
if (otherItem !== item) {
const otherSubmenu = otherItem.querySelector('.submenu');
if (otherSubmenu) {
otherSubmenu.classList.add('hidden');
}
}
});
}
});
});
// Desktop hover interaction for submenu items (subsubmenu visibility)
submenuItems.forEach(item => {
item.addEventListener('mouseenter', function () {
if (window.innerWidth >= 768) {
const subsubmenu = item.querySelector('.subsubmenu');
if (subsubmenu) {
subsubmenu.classList.remove('hidden');
}
}
});
item.addEventListener('mouseleave', function () {
if (window.innerWidth >= 768) {
const subsubmenu = item.querySelector('.subsubmenu');
if (subsubmenu) {
subsubmenu.classList.add('hidden');
}
}
});
// Mobile click interaction for submenu items (subsubmenu toggle visibility)
item.addEventListener('click', function (e) {
if (window.innerWidth <= 768) {
const subsubmenu = item.querySelector('.subsubmenu');
if (subsubmenu) {
subsubmenu.classList.toggle('hidden');
}
// Close all other submenus when one is opened
submenuItems.forEach(otherItem => {
if (otherItem !== item) {
const othersubSubmenu = otherItem.querySelector('.subsubmenu');
if (othersubSubmenu) {
othersubSubmenu.classList.add('hidden');
}
}
});
// Prevent the event from propagating to the parent menu item click
e.stopPropagation();
}
});
});
});