40 lines
1.5 KiB
JavaScript
40 lines
1.5 KiB
JavaScript
// @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0-1.0
|
|
// burger.js
|
|
|
|
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);
|
|
} else {
|
|
menu.style.animation = "slideOut 0.3s forwards";
|
|
// Remove the event listener to close the menu
|
|
document.removeEventListener("click", closeMenu);
|
|
// Reset animation after it's completed
|
|
menu.addEventListener("animationend", () => {
|
|
menu.style.animation = "";
|
|
}, { once: true });
|
|
}
|
|
}
|
|
|
|
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
|
|
document.removeEventListener("click", closeMenu);
|
|
// Reset animation after it's completed
|
|
menu.addEventListener("animationend", () => {
|
|
menu.classList.remove("active");
|
|
menu.style.animation = "";
|
|
}, { once: true });
|
|
}
|
|
}
|
|
|
|
// @license-end
|