honfred/fidem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

29
assets/css/main.css
View File

@@ -317,19 +317,27 @@ a:hover {
.mobile-menu-toggle {
display: none;
flex-direction: column;
background: none;
border: none;
cursor: pointer;
padding: 5px;
gap: 4px;
padding: 8px;
font-size: 1.5rem;
color: var(--text-dark);
transition: var(--transition);
line-height: 1;
}
.mobile-menu-toggle i {
transition: var(--transition);
display: inline-block;
}
.mobile-menu-toggle.active i {
transform: rotate(90deg);
}
.mobile-menu-toggle span {
width: 25px;
height: 3px;
background-color: var(--text-dark);
transition: var(--transition);
display: none;
}
/* Hero Section */
@@ -658,7 +666,9 @@ a:hover {
font-size: 1.5rem;
color: var(--text-light);
cursor: pointer;
padding: 0.5rem;
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
transition: var(--transition);
flex-shrink: 0;
@@ -666,6 +676,9 @@ a:hover {
top: 1rem;
right: 1rem;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.modal-close:hover {

31
assets/js/main.js
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');
}
});
}