menu.js (1191B)
1 const container = document.querySelector(".container"); 2 const allMenus = document.querySelectorAll(".menu"); 3 4 // Hide menus on body click 5 document.body.addEventListener("click", () => { 6 allMenus.forEach(menu => { 7 if (menu.classList.contains("open")) { 8 menu.classList.remove("open"); 9 } 10 }); 11 }); 12 13 // Reset menus on resize 14 window.addEventListener("resize", () => { 15 allMenus.forEach(menu => { 16 menu.classList.remove("open"); 17 }); 18 }); 19 20 // Handle desktop menu 21 allMenus.forEach(menu => { 22 const trigger = menu.querySelector(".menu__trigger"); 23 const dropdown = menu.querySelector(".menu__dropdown"); 24 25 trigger.addEventListener("click", e => { 26 e.stopPropagation(); 27 28 if (menu.classList.contains("open")) { 29 menu.classList.remove("open"); 30 } else { 31 // Close all menus... 32 allMenus.forEach(m => m.classList.remove("open")); 33 // ...before opening the current one 34 menu.classList.add("open"); 35 } 36 37 if (dropdown.getBoundingClientRect().right > container.getBoundingClientRect().right) { 38 dropdown.style.left = "auto"; 39 dropdown.style.right = 0; 40 } 41 }); 42 43 dropdown.addEventListener("click", e => e.stopPropagation()); 44 }); 45