Анимация иконки «Гамбургер» на CSS3

Иконка меню вида «гамбургер» стала главным предметом на многих веб-сайтах и в веб-приложениях. Пользователи используют этот значок для показа и скрытия меню, а компактная форма делает его стильным, особенно на небольших экранах.

В этом уроке покажем, как создать иконку «гамбургера» для меню на чистом CSS.

Раньше, для реализации иконки «гамбургера» использовались спрайты и изображения.

Но без небольшого кода JavaScript тут не обойтись. Он понадобится нам для того чтобы при клике на иконку добавлять стиль active к активной кнопке.

Общая разметка

Разметка каждой кнопки похожа, и каждая кнопка имеет один общий класс и один уникальный класс. Каждая кнопка состоит из тега button и вложенного тега span. Тег button служит контейнером значка: ему задаются внутренние отступы и цвет фона. Тег span будет «основой» для «гамбургеров». Вот разметка кнопок:


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Иконки гамбургер</title>
    
    <link href="style.css" rel="stylesheet" >
</head>

<body>
    
    <button type="button" aria-expanded="false" aria-label="Открыть меню" class="cmn-toggle-switch cmn-toggle-switch__rot">
  <span>toggle menu</span>
</button>
 
<button type="button" aria-expanded="false" aria-label="Открыть меню" class="cmn-toggle-switch cmn-toggle-switch__htx">
  <span>toggle menu</span>
</button>
 
<button type="button" aria-expanded="false" aria-label="Открыть меню" class="cmn-toggle-switch cmn-toggle-switch__htla">
  <span>toggle menu</span>
</button>
 
<button type="button" aria-expanded="false" aria-label="Открыть меню" class="cmn-toggle-switch cmn-toggle-switch__htra">
  <span>toggle menu</span>
</button>
    

    
</body>
</html>

В этом коде мы использовали самую простую разметку. А так же в head подключили библиотеку jQuery.

Немного JavaScript

Все нижеописанное будет бесполезно, без использования JavaScript, так как именно с помощью JS мы будем менять класс наших кнопок. Добавьте данный код после закрывающего тега </body>.


<script>
    
(function() {
 
  "use strict";
 
  var toggles = document.querySelectorAll(".cmn-toggle-switch");
 
  for (var i = toggles.length - 1; i >= 0; i--) {
    var toggle = toggles[i];
    toggleHandler(toggle);
  };
 
  function toggleHandler(toggle) {
    toggle.addEventListener( "click", function(e) {
      e.preventDefault();
      this.classList.toggle("active");
      this.setAttribute("aria-expanded", this.classList.contains("active") ? "true" : "false");
    });
  }
 
})();
    
</script>

Так мы сразу сможешь видеть результат.

А теперь, давайте приступим к стилям наших кнопок.

Иконка «гамбургер» на CSS3

Для начала «сбросим» все стили кнопок, так чтобы не было теней, рамок и отступов. А также, определим ширину и высоту кнопки (которая пригодится для анимации), и скроем текст. Вот CSS для родителя класса «cmn-toggle-switch«:


.cmn-toggle-switch {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 108px;
  height: 96px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: 0;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
          transition: background 0.3s;
}
 
.cmn-toggle-switch:focus {
  outline: revert;
}

Теперь, внутренний тег span, являющийся основой для «гамбургеров». Нам нужны три полосы, поэтому мы будем использовать сам тэг, и его псевдо элементы ::before и :: after. Позиционирование каждой полосы (и самого span) все математически рассчитывается на основе размеров родительского button.


.cmn-toggle-switch span {
  display: block;
  position: absolute;
  top: 45px;
  left: 18px;
  right: 18px;
  height: 6px;
  background: white;
}
 
.cmn-toggle-switch span::before,
.cmn-toggle-switch span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: #fff;
  content: "";
}
 
.cmn-toggle-switch span::before {
  top: -27px;
}
 
.cmn-toggle-switch span::after {
  bottom: -27px;
}

Теперь у нас есть иконки «гамбургер». Но, пока что они у нас без стилей цвета и стрелочек. Давайте перейдем к каждому из наших примеров.

Пример 1 — Вращающаяся иконка

Это самая простая иконка, так как все что мы делаем – вращение, когда ставиться класс active.


/**
 * Style 1
 */
.cmn-toggle-switch__rot {
  background-color: #28aadc;
}
 
.cmn-toggle-switch__rot span {
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}
 
/* active state*/
.cmn-toggle-switch__rot.active {
  background-color: #166888;
}
 
.cmn-toggle-switch__rot.active span {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

Пример 2 — Трансформация в крест

С помощью этого стиля, иконка трансформируется в «X», поворачивая верхний и нижние бары вертикально к центре иконки.

Вот CSS стили:


/**
 * Style 2
 */
.cmn-toggle-switch__htx {
  background-color: #ff3264;
}
 
.cmn-toggle-switch__htx span {
  -webkit-transition: background 0 0.3s;
          transition: background 0 0.3s;
}
 
.cmn-toggle-switch__htx span::before,
.cmn-toggle-switch__htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0;
          transition-delay: 0.3s, 0;
}
 
.cmn-toggle-switch__htx span::before {
  -webkit-transition-property: top, -webkit-transform;
          transition-property: top, transform;
}
 
.cmn-toggle-switch__htx span::after {
  -webkit-transition-property: bottom, -webkit-transform;
          transition-property: bottom, transform;
}
 
/* active state*/
.cmn-toggle-switch__htx.active {
  background-color: #cb0032;
}
 
.cmn-toggle-switch__htx.active span {
  background: none;
}
 
.cmn-toggle-switch__htx.active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
 
.cmn-toggle-switch__htx.active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
 
.cmn-toggle-switch__htx.active span::before,
.cmn-toggle-switch__htx.active span::after {
  -webkit-transition-delay: 0, 0.3s;
          transition-delay: 0, 0.3s;
}

Пример 3 – Трансформация в стрелку влево

В этой версии иконки, все это вращается на 180 градусов, а верхние и нижние линии формируются в направляющую стрелку влево.


/**
 * Style 3
 */
.cmn-toggle-switch__htla {
  background-color: #32dc64;
}
 
.cmn-toggle-switch__htla span {
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}
 
.cmn-toggle-switch__htla span::before {
  -webkit-transform-origin: top right;
      -ms-transform-origin: top right;
          transform-origin: top right;
  -webkit-transition: -webkit-transform 0.3s, width 0.3s, top 0.3s;
          transition: transform 0.3s, width 0.3s, top 0.3s;
}
 
.cmn-toggle-switch__htla span::after {
  -webkit-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-transition: -webkit-transform 0.3s, width 0.3s, bottom 0.3s;
          transition: transform 0.3s, width 0.3s, bottom 0.3s;
}
 
/* active state*/
.cmn-toggle-switch__htla.active {
  background-color: #18903c;
}
 
.cmn-toggle-switch__htla.active span {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
 
.cmn-toggle-switch__htla.active span::before,
.cmn-toggle-switch__htla.active span::after {
  width: 50%;
}
 
.cmn-toggle-switch__htla.active span::before {
  top: 0;
  -webkit-transform: translateX(42px) translateY(3px) rotate(45deg);
      -ms-transform: translateX(42px) translateY(3px) rotate(45deg);
          transform: translateX(42px) translateY(3px) rotate(45deg);
}
 
.cmn-toggle-switch__htla.active span::after {
  bottom: 0;
  -webkit-transform: translateX(42px) translateY(-3px) rotate(-45deg);
      -ms-transform: translateX(42px) translateY(-3px) rotate(-45deg);
          transform: translateX(42px) translateY(-3px) rotate(-45deg);
}

Пример 4 — Стрелка вправо

Этот стиль очень похож на тот же способ описанный выше, различается только сторона указания (т.е. вправо).

А вот и стили CSS:


/**
 * Style 4
 */
.cmn-toggle-switch__htra {
  background-color: #ff9650;
}
 
.cmn-toggle-switch__htra span {
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}
 
.cmn-toggle-switch__htra span::before {
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
  -webkit-transition: -webkit-transform 0.3s, width 0.3s, top 0.3s;
          transition: transform 0.3s, width 0.3s, top 0.3s;
}
 
.cmn-toggle-switch__htra span::after {
  -webkit-transform-origin: bottom left;
      -ms-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transition: -webkit-transform 0.3s, width 0.3s, bottom 0.3s;
          transition: transform 0.3s, width 0.3s, bottom 0.3s;
}
 
/* active state*/
.cmn-toggle-switch__htra.active {
  background-color: #e95d00;
}
 
.cmn-toggle-switch__htra.active span {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
 
.cmn-toggle-switch__htra.active span::before,
.cmn-toggle-switch__htra.active span::after {
  width: 50%;
}
 
.cmn-toggle-switch__htra.active span::before {
  top: 0;
  -webkit-transform: translateX(-6px) translateY(3px) rotate(-45deg);
      -ms-transform: translateX(-6px) translateY(3px) rotate(-45deg);
          transform: translateX(-6px) translateY(3px) rotate(-45deg);
}
 
.cmn-toggle-switch__htra.active span::after {
  bottom: 0;
  -webkit-transform: translateX(-6px) translateY(-3px) rotate(45deg);
      -ms-transform: translateX(-6px) translateY(-3px) rotate(45deg);
          transform: translateX(-6px) translateY(-3px) rotate(45deg);
}

Заключение

Как видите, всё не так сложно как могло бы показаться на первый взгляд. Все анимации сделаны на CSS3, а именно с помощью свойства transform , а значит не все старые браузеры смогут отобразить эти анимации.

Надеюсь, эта статья была вам полезна. Как эти анимации работают вы можете рассмотреть в Демо.

Источник: http://speckyboy.com/

Уточнения

В образцах исправлены border-radius и видимый фокус кнопок; aria-expanded отражает состояние. Лишнее подключение jQuery удалено: обработчик использует обычный JavaScript. Код следует размещать внутри body, обычно перед его закрытием. Состояние кнопки нужно синхронизировать с реальным показом меню.

MDN: состояние раскрытия кнопки

Анимация иконки «Гамбургер» на CSS3

Общая разметка

Немного JavaScript

Иконка «гамбургер» на CSS3

Пример 1 — Вращающаяся иконка

Пример 2 — Трансформация в крест

Пример 3 – Трансформация в стрелку влево

Пример 4 — Стрелка вправо

Заключение

Уточнения

Статьи по теме

5 HTML-редакторов для Mac OS X: обзор 2015 года

Как сверстать простое горизонтальное меню на CSS

Встречаем новую версию Brackets 1.3

32 примера веб-анимации: подборка