Как создать анимированную иконку для гамбургер-меню, используя только HTML, CSS и JavaScript, без сторонних шаблонов и библиотек? Давайте начнем с разметки, стилей и завершения скриптом для взаимодействия.
HTML код для Hamburger menu
HTML-код предельно прост: нам нужен блок-обертка .container, по центру которого размещен родительский элемент иконки для гамбургер-меню .menu-icon. Сам блок .menu-icon содержит три вложенных блока span, которые, собственно, и создают графическую составляющую иконки:
<div class="container">
<div class="menu-icon">
<span></span>
<span></span>
<span></span>
</div>
</div>CSS ОБЕРТКА
Блок-обертка нужен для того, чтобы расположить иконку по центру:
:root {
background-color: #333;
}
.container {
width: 100%;
height: 100vh;
display: flex;
}Hamburger-menu icon
С помощью grid мы без затруднений расположим вложенные элементы span относительно центра родительского блока .menu-icon. place-items: center — упрощенный синтаксис, включающий в себя align-items: center и justify-items: center.
.menu-icon {
margin: auto;
display: grid;
place-items: center;
height: 55px;
width: 55px;
cursor: pointer;
overflow: hidden;
}SPAN
Стилизуем span — линии иконки гамбургер-меню. Таким образом, мы придадим нашему решению оригинальность:
.menu-icon > span {
width: 50px;
height: 3px;
display: block;
background-color: red;
transition: all 0.3s ease-in-out;
justify-self: end;
}
.menu-icon > span:nth-child(1) {
width: 42px;
}
.menu-icon > span:nth-child(2) {
width: 35px;
}Все линии выравниваются по правому краю родительского блока и имеют разную длину.
HOVER-ЭФФЕКТ
При наведении мы изменим длину первой и второй линий, а transition создаст плавную анимацию этого эффекта.
.menu-icon:hover > span:nth-child(1) {
width: 30px;
}
.menu-icon:hover > span:nth-child(2) {
width: 40px;
}Анимация при нажатии
Переходим к самой интересной части. Изменим положение, длину и угол наклона первой и третьей линий, так чтобы получился знак “X”. Среднюю линию скроем.
.menu-icon.active span:nth-child(1) {
transform-origin: center center;
transform: rotate(-45deg) translate(-20%, 500%);
width: 55px;
}
.menu-icon.active span:nth-child(2) {
transform: translateX(40px);
}
.menu-icon.active span:nth-child(3) {
transform-origin: center center;
transform: rotate(45deg) translate(-20%, -500%);
width: 55px;
}При нажатии на иконку к .menu-icon добавляется CSS-класс .active. В результате: первая и последняя линии поворачиваются нужным образом с помощью параметров rotate и translate, средняя линия уходит вправо за область видимости благодаря translateX.
JavaScript для гамбургер-меню
Добавим простой скрипт, который отвечает за добавление и удаление класса .active при нажатии на иконку.
const menuIcon = document.querySelector(‘.menu-icon’);
function toggleMenuIcon() {
menuIcon.classList.toggle('active');
}
menuIcon.addEventListener('click', toggleMenuIcon);Теперь у вас есть полностью функциональная анимированная иконка гамбургер-меню, созданная на чистом CSS и JavaScript. Вы можете легко интегрировать этот код в ваш проект и модифицировать его под ваши нужды, например, изменив цвет, размер или анимацию.
