Улучшил мобильное меню и модальное окно

This commit is contained in:
Honfred
2026-02-06 06:51:35 +03:00
parent 56e4c1239b
commit cf41bf0642
3 changed files with 37 additions and 27 deletions

View File

@@ -52,17 +52,16 @@ function initMobileMenu() {
if (mobileMenuToggle && navbarMenu) {
mobileMenuToggle.addEventListener('click', function() {
navbarMenu.classList.toggle('active');
mobileMenuToggle.classList.toggle('active');
// Animate hamburger menu
const spans = mobileMenuToggle.querySelectorAll('span');
// Toggle hamburger/close icon
const icon = mobileMenuToggle.querySelector('i');
if (navbarMenu.classList.contains('active')) {
spans[0].style.transform = 'rotate(45deg) translateY(7px)';
spans[1].style.opacity = '0';
spans[2].style.transform = 'rotate(-45deg) translateY(-7px)';
icon.classList.remove('fa-bars');
icon.classList.add('fa-times');
} else {
spans[0].style.transform = 'none';
spans[1].style.opacity = '1';
spans[2].style.transform = 'none';
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
}
});
@@ -70,10 +69,10 @@ function initMobileMenu() {
navLinks.forEach(link => {
link.addEventListener('click', () => {
navbarMenu.classList.remove('active');
const spans = mobileMenuToggle.querySelectorAll('span');
spans[0].style.transform = 'none';
spans[1].style.opacity = '1';
spans[2].style.transform = 'none';
mobileMenuToggle.classList.remove('active');
const icon = mobileMenuToggle.querySelector('i');
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
});
});
@@ -81,10 +80,10 @@ function initMobileMenu() {
document.addEventListener('click', function(e) {
if (!navbarMenu.contains(e.target) && !mobileMenuToggle.contains(e.target)) {
navbarMenu.classList.remove('active');
const spans = mobileMenuToggle.querySelectorAll('span');
spans[0].style.transform = 'none';
spans[1].style.opacity = '1';
spans[2].style.transform = 'none';
mobileMenuToggle.classList.remove('active');
const icon = mobileMenuToggle.querySelector('i');
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
}
});
}