diff --git a/burger.js b/burger.js index 24c42cd..839317f 100644 --- a/burger.js +++ b/burger.js @@ -3,21 +3,21 @@ function toggleMenu() { const menu = document.querySelector(".menu"); - + // Toggle the 'active' class to show/hide the menu menu.classList.toggle("active"); - + // Apply animations based on the menu's visibility if (menu.classList.contains("active")) { - menu.style.animation = "slideIn 0.3s forwards"; - document.addEventListener("click", closeMenu); + menu.style.animation = "slideIn 0.3s forwards"; // Menu is shown here + document.addEventListener("click", closeMenu); // Event listener added to close menu } else { - menu.style.animation = "slideOut 0.3s forwards"; - // Remove the event listener to close the menu + menu.style.animation = "slideOut 0.3s forwards"; // Menu is hidden here + // Remove the event listener to close the menu (this line removes the event listener, not closes the menu) document.removeEventListener("click", closeMenu); // Reset animation after it's completed menu.addEventListener("animationend", () => { - menu.style.animation = ""; + menu.style.animation = ""; // Animation reset after hiding menu }, { once: true }); } } @@ -26,13 +26,13 @@ function closeMenu(event) { const menu = document.querySelector(".menu"); // Check if the click is outside the menu and not on the burger icon if (!menu.contains(event.target) && !event.target.classList.contains("burger-menu")) { - menu.style.animation = "slideOut 0.3s forwards"; - // Remove the event listener to close the menu + menu.style.animation = "slideOut 0.3s forwards"; // Menu is hidden here + // Remove the event listener to close the menu (again, this line removes the event listener) document.removeEventListener("click", closeMenu); - // Reset animation after it's completed - menu.addEventListener("animationend", () => { - menu.classList.remove("active"); - menu.style.animation = ""; + // After animation completes, remove 'active' class and reset animation + menu.addEventListener("animationend", function() { + menu.classList.remove("active"); // 'active' class removed after animation completes + menu.style.animation = ""; // Animation reset after hiding menu }, { once: true }); } }