homepage.veen.world/app/static/js/submenus.js

54 lines
1.5 KiB
JavaScript
Raw Normal View History

2025-01-09 14:42:38 +01:00
document.addEventListener('DOMContentLoaded', () => {
2025-01-14 17:08:59 +01:00
const menuItems = document.querySelectorAll('.nav-item.dropdown, .dropdown-submenu');
2025-01-09 14:42:38 +01:00
2025-01-14 17:08:59 +01:00
menuItems.forEach(item => {
let timeout;
2025-01-09 14:42:38 +01:00
2025-01-14 17:08:59 +01:00
// Öffnen beim Hovern
item.addEventListener('mouseenter', () => {
clearTimeout(timeout);
openMenu(item);
});
2025-01-10 14:05:53 +01:00
2025-01-14 17:08:59 +01:00
// Verzögertes Schließen beim Verlassen
item.addEventListener('mouseleave', () => {
timeout = setTimeout(() => closeMenu(item), 500);
});
2025-01-09 14:42:38 +01:00
2025-01-14 17:08:59 +01:00
// Offen lassen beim Klicken
item.addEventListener('click', (e) => {
e.stopPropagation(); // Verhindert das Schließen von Menüs bei Klick
if (item.classList.contains('open')) {
closeMenu(item);
} else {
openMenu(item);
}
2025-01-09 14:42:38 +01:00
});
2025-01-14 17:08:59 +01:00
});
// Globale Klick-Listener, um Menüs zu schließen, wenn außerhalb geklickt wird
document.addEventListener('click', () => {
menuItems.forEach(item => closeMenu(item));
});
function openMenu(item) {
item.classList.add('open');
const submenu = item.querySelector('.dropdown-menu');
if (submenu) {
submenu.style.display = 'block';
submenu.style.opacity = '1';
submenu.style.visibility = 'visible';
}
}
function closeMenu(item) {
item.classList.remove('open');
const submenu = item.querySelector('.dropdown-menu');
if (submenu) {
submenu.style.display = 'none';
submenu.style.opacity = '0';
submenu.style.visibility = 'hidden';
}
}
2025-01-09 14:42:38 +01:00
});