Создание анимированной иконки гамбургер-меню с использованием CSS и JavaScript

В этом руководстве мы создадим анимированную иконку гамбургер-меню, используя только CSS и JavaScript. Мы не будем использовать сторонние шаблоны или библиотеки, что позволит нам полностью контролировать дизайн и анимацию.

Содержание

HTML
CSS
JavaScript
Заключение

HTML

Начнем с простого 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;
align-items: center;
justify-content: center;
}

Значок меню

Используем CSS Grid для центровки элементов <span> внутри .menu-icon. Это поможет легко управлять расположением иконки.

.menu-icon {
display: grid;
place-items: center;
height: 55px;
width: 55px;
cursor: pointer;
}

Диапазон

Теперь стилизуем <span> элементы, чтобы создать линии иконки. Мы также добавим эффекты перехода для анимации.

.menu-icon > span {
width: 50px;
height: 3px;
display: block;
background-color: red;
transition: all 0.3s ease-in-out;
margin: 5px 0;
}

.menu-icon > span:nth-child(1) {
width: 42px;
}

.menu-icon > span:nth-child(2) {
width: 35px;
}

Hover-эффект

При наведении мыши на иконку изменим длину линий, создавая плавный анимационный эффект.

.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) {
opacity: 0;
}

.menu-icon.active span:nth-child(3) {
transform-origin: center center;
transform: rotate(45deg) translate(-20%, -500%);
width: 55px;
}

JavaScript

Добавим простой JavaScript, чтобы переключать класс .active при клике на иконку.

const menuIcon = document.querySelector('.menu-icon');

function toggleMenuIcon() {
menuIcon.classList.toggle('active');
}

menuIcon.addEventListener('click', toggleMenuIcon);

Этот скрипт добавляет и удаляет класс .active, который активирует анимацию при нажатии на иконку.

Заключение

Мы создали анимированную иконку гамбургер-меню, использовав CSS и JavaScript. Этот подход дает возможность кастомизировать и контролировать каждый аспект анимации и стиля иконки.