sageTheDm/foss_alternatives
1
0
Fork 0
forked from interstellar_development/foss_alternatives
Code Pull requests Activity

ahhhhhhh

Browse source
This commit is contained in:
Sage The DM 2024-06-25 10:25:47 +02:00
parent e2e7e90e01
commit c46d66daef
1 changed files with 13 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

26
burger.js
View file

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