50 lines
1.7 KiB
JavaScript
50 lines
1.7 KiB
JavaScript
// Mobile Menu Functionality
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
|
|
const navLinks = document.querySelector('.nav-links');
|
|
const overlay = document.querySelector('.mobile-menu-overlay');
|
|
const body = document.body;
|
|
|
|
function toggleMenu() {
|
|
const isActive = mobileMenuToggle.classList.contains('active');
|
|
|
|
if (isActive) {
|
|
mobileMenuToggle.classList.remove('active');
|
|
navLinks.classList.remove('active');
|
|
overlay.classList.remove('active');
|
|
body.classList.remove('menu-open');
|
|
} else {
|
|
mobileMenuToggle.classList.add('active');
|
|
navLinks.classList.add('active');
|
|
overlay.classList.add('active');
|
|
body.classList.add('menu-open');
|
|
}
|
|
}
|
|
|
|
function closeMenu() {
|
|
mobileMenuToggle.classList.remove('active');
|
|
navLinks.classList.remove('active');
|
|
overlay.classList.remove('active');
|
|
body.classList.remove('menu-open');
|
|
}
|
|
|
|
if (mobileMenuToggle && navLinks && overlay) {
|
|
mobileMenuToggle.addEventListener('click', toggleMenu);
|
|
|
|
// Close menu when clicking on overlay
|
|
overlay.addEventListener('click', closeMenu);
|
|
|
|
// Close menu when clicking on a link
|
|
const navLinksItems = navLinks.querySelectorAll('a');
|
|
navLinksItems.forEach(link => {
|
|
link.addEventListener('click', closeMenu);
|
|
});
|
|
|
|
// Close menu on escape key
|
|
document.addEventListener('keydown', function(event) {
|
|
if (event.key === 'Escape') {
|
|
closeMenu();
|
|
}
|
|
});
|
|
}
|
|
}); |