Hamburger Menu на чистом CSS и JS

Как создать анимированную иконку для гамбургер-меню, используя только HTML, CSS и JavaScript, без сторонних шаблонов и библиотек? Давайте начнем с разметки, стилей и завершения скриптом для взаимодействия.

Содержание

HTML код для Hamburger menu
CSS ОБЕРТКА
Hamburger-menu icon
SPAN
HOVER-ЭФФЕКТ
Анимация при нажатии
JavaScript для гамбургер-меню

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;
}

С помощью 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. Вы можете легко интегрировать этот код в ваш проект и модифицировать его под ваши нужды, например, изменив цвет, размер или анимацию.