Сегодня мы создадим анимированную иконку для гамбургер-меню на чистом 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;
}

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

Пример с исходным кодом можно посмотреть на codepen:

Спасибо за внимание.

Написано по материалам статьи Adesile Emmanuel “How to create a hamburger menu icon with CSS and JavaScript”.