Введение
Меню-бургер стало неотъемлемой частью современного веб-дизайна, особенно для мобильных версий сайтов. Создание анимированного меню-бургера не только улучшает пользовательский опыт, но и добавляет сайту профессиональный вид. Рассмотрим, как создать стильное анимированное меню-бургер с плавными переходами.
HTML структура
<div class="burger-menu">
<div class="burger-icon">
<span></span>
<span></span>
<span></span>
</div>
<nav class="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</div>
CSS стили
.burger-menu {
position: relative;
width: 40px;
height: 40px;
cursor: pointer;
}
.burger-icon {
position: relative;
width: 100%;
height: 100%;
}
.burger-icon span {
position: absolute;
width: 100%;
height: 2px;
background-color: #333;
transition: all 0.3s ease-in-out;
}
.burger-icon span:nth-child(1) {
top: 10px;
}
.burger-icon span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.burger-icon span:nth-child(3) {
bottom: 10px;
}
.burger-menu.active .burger-icon span:nth-child(1) {
transform: rotate(45deg) translate(8px, 8px);
}
.burger-menu.active .burger-icon span:nth-child(2) {
opacity: 0;
}
.burger-menu.active .burger-icon span:nth-child(3) {
transform: rotate(-45deg) translate(8px, -8px);
}
.menu {
position: absolute;
top: 100%;
right: 0;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
opacity: 0;
visibility: hidden;
transform: translateY(-20px);
transition: all 0.3s ease-in-out;
}
.burger-menu.active .menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
JavaScript код
document.querySelector('.burger-menu').addEventListener('click', function() {
this.classList.toggle('active');
});
Объяснение кода
Наше меню-бургер состоит из трех основных компонентов:
HTML структура создает три полоски бургера с помощью span-элементов и контейнер для меню навигации.
CSS стили обеспечивают:
- Позиционирование элементов
- Базовый вид трех полосок
- Анимацию трансформации полосок в крестик
- Плавное появление меню
- Переходные эффекты
JavaScript добавляет класс active при клике, запуская анимацию.
Ключевые моменты анимации:
- Использование transform для вращения полосок
- Применение transition для плавности
- Работа с opacity для второй полоски
- Анимация появления меню через transform и opacity
Заключение
Создание анимированного меню-бургера – это отличный пример того, как можно улучшить пользовательский интерфейс с помощью простых CSS-анимаций. Такое меню не только функционально, но и привлекательно визуально. При необходимости его можно легко кастомизировать, меняя цвета, размеры и скорость анимации под конкретный проект.
