MIGO Web-Development - разработка и cоздание сайтов в Киеве, Украине

Создание сайтов, поисковое продвижение в Google. Сопровождение, тех.поддержка


звонить: +38 (093) 636 78 08
писать: web@migo.com.ua


Анимация иконки гамбургер-меню на чистом CSS

Анимация иконки гамбургер-меню на чистом CSS

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

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

Сегодня, когда обычной иконкой гамбургер-меню уже никого не удивишь, я хочу предложить ее немного “оживить” для более интерактивного взаимодействия с пользователем. В примерах представлено несколько простых анимаций для наших значков, указывая, что они «активны», или что, возможно, меню открыто. Для определения состояния активности иконки/открытия меню будет использован маленький JavaScript сама же анимация использует только чистый CSS.

Для начала результат:

See the Pen Animating Hamburger Menu Icon Styles by Migo Userlife (@migo_userlife) on CodePen.

Отлично, теперь пожалуй начнем!

Начальная разметка

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

<button class="toggle-hamburger toggle-hamburger__animx">
  <span>menu toggle</span>
</button>

<button class="toggle-hamburger toggle-hamburger__arrtoleft">
  <span>menu toggle</span>
</button>

<button class="toggle-hamburger toggle-hamburger__arrtobottom">
  <span>menu toggle</span>
</button>

<button class="toggle-hamburger toggle-hamburger__check">
  <span>menu toggle</span>
</button>

Теперь добавим несколько базовых стилей CSS, которые будут общими для всех кнопок.

Базовые стили CSS

Для начала “перекроем” стандартные стили кнопок, чтобы не было видно теней, границ и значений по умолчанию. Также определим ширину и высоту кнопки (которая пригодится вдальнейшем для анимации), и скроем текст:

/* button starting stylings ------------------------------- */
.toggle-hamburger {
  background-color: #fff;
  color: #ccc;
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 96px;
  height: 96px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-shadow: none;
  border: none;
  border-radius: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}
.toggle-hamburger:focus {
  outline: none;
}

Теперь, внутренний тег span фактически является родительским для баров гамбургера. Нам нужно три бара, поэтому будем использовать сам тег и его псевдоэлементы ::before и ::after. Позиционирование каждого бара (и самого тега span) все математически вычисляется на основе размеров родительской кнопки. Если вы пользуетесь Sass, как я, то это очень просто, и вы можете посмотреть все Sass и переменные для редактирования в исходном коде демонстрации в начале этой записи. Если нет, вам придется самостоятельно производить расчет размеров всех элементов в случае изменения базовых размеров кнопок, которые приведены здесь. Вот CSS для внутренних интервалов:

/* inner span stylings ------------------------------- */
.toggle-hamburger span {
  display: block;
  position: absolute;
  top: 44px;
  left: 18px;
  right: 18px;
  height: 8px;
  background: #ff3264;
}
.toggle-hamburger span::before, .toggle-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #ff3264;
  content: "";
}
.toggle-hamburger span::before {
  top: -20px;
}
.toggle-hamburger span::after {
  bottom: -20px;
}

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

СТИЛЬ №1 – Превращение в крестик “Х” (Animate X)

Эта версия значка гамбургера видоизменяет его до “Х”, перемещая верхний и нижний бары в центр значка, а затем поворачивая их по вертикали. Для достижения эффекта плавного перехода используем задержки анимации, чтобы преобразование в “Х” произошло после того, как верхняя и нижняя полосы переместились в середину. Вот CSS:

.toggle-hamburger.toggle-hamburger__animx span {
  -webkit-transition: background 0s 0.3s;
  transition: background 0s 0.3s;
}
.toggle-hamburger.toggle-hamburger__animx span::before, .toggle-hamburger.toggle-hamburger__animx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0s;
          transition-delay: 0.3s, 0s;
}
.toggle-hamburger.toggle-hamburger__animx span::before {
  -webkit-transition-property: top, transform;
  transition-property: top, transform;
}
.toggle-hamburger.toggle-hamburger__animx span::after {
  -webkit-transition-property: bottom, transform;
  transition-property: bottom, transform;
}

/* when menu open: */
.toggle-hamburger.toggle-hamburger__animx.is-active span {
  background: none;
}
.toggle-hamburger.toggle-hamburger__animx.is-active span::before, .toggle-hamburger.toggle-hamburger__animx.is-active span::after {
  background-color: #b2002b;
  -webkit-transition-delay: 0s, 0.3s;
          transition-delay: 0s, 0.3s;
}
.toggle-hamburger.toggle-hamburger__animx.is-active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.toggle-hamburger.toggle-hamburger__animx.is-active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

СТИЛЬ №2 – Превращение в стрелку направленную влево (To Left-Arrow)

В этой версии значка он переворачивается на 180 градусов, а верхняя и нижняя полосы видоизменяются образуя стрелку с указателем влево. Вот CSS:

.toggle-hamburger.toggle-hamburger__arrtoleft span {
  background-color: #32dc64;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.toggle-hamburger.toggle-hamburger__arrtoleft span::before, .toggle-hamburger.toggle-hamburger__arrtoleft span::after {
  background-color: #32dc64;
}
.toggle-hamburger.toggle-hamburger__arrtoleft span::before {
  -webkit-transform-origin: top right;
          transform-origin: top right;
  -webkit-transition: width 0.3s, top 0.3s, -webkit-transform 0.3s;
  transition: width 0.3s, top 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, width 0.3s, top 0.3s;
  transition: transform 0.3s, width 0.3s, top 0.3s, -webkit-transform 0.3s;
}
.toggle-hamburger.toggle-hamburger__arrtoleft span::after {
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-transition: width 0.3s, bottom 0.3s, -webkit-transform 0.3s;
  transition: width 0.3s, bottom 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, width 0.3s, bottom 0.3s;
  transition: transform 0.3s, width 0.3s, bottom 0.3s, -webkit-transform 0.3s;
}
/* when menu open: */
.toggle-hamburger.toggle-hamburger__arrtoleft.is-active span {
  background-color: #157a32;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.toggle-hamburger.toggle-hamburger__arrtoleft.is-active span::before, .toggle-hamburger.toggle-hamburger__arrtoleft.is-active span::after {
  background-color: #157a32;
  width: 50%;
}
.toggle-hamburger.toggle-hamburger__arrtoleft.is-active span::before {
  top: 0;
  -webkit-transform: translateX(38px) translateY(4px) rotate(45deg);
          transform: translateX(38px) translateY(4px) rotate(45deg);
}
.toggle-hamburger.toggle-hamburger__arrtoleft.is-active span::after {
  bottom: 0;
  -webkit-transform: translateX(38px) translateY(-4px) rotate(-45deg);
          transform: translateX(38px) translateY(-4px) rotate(-45deg);
}

СТИЛЬ №3 – Превращение в стрелку направленную вниз (To Bottom-Arrow)

Аналогично предыдущему примеру, только на этот раз мы иконку переворачиваем на 90 градусов, тем самым обязывая стрелку указывать уже вниз:

.toggle-hamburger.toggle-hamburger__arrtobottom span {
  background-color: #28aadc;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.toggle-hamburger.toggle-hamburger__arrtobottom span::before, .toggle-hamburger.toggle-hamburger__arrtobottom span::after {
  background-color: #28aadc;
}
.toggle-hamburger.toggle-hamburger__arrtobottom span::before {
  -webkit-transform-origin: top right;
          transform-origin: top right;
  -webkit-transition: width 0.3s, top 0.3s, -webkit-transform 0.3s;
  transition: width 0.3s, top 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, width 0.3s, top 0.3s;
  transition: transform 0.3s, width 0.3s, top 0.3s, -webkit-transform 0.3s;
}
.toggle-hamburger.toggle-hamburger__arrtobottom span::after {
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-transition: width 0.3s, bottom 0.3s, -webkit-transform 0.3s;
  transition: width 0.3s, bottom 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, width 0.3s, bottom 0.3s;
  transition: transform 0.3s, width 0.3s, bottom 0.3s, -webkit-transform 0.3s;
}
/* when menu open: */
.toggle-hamburger.toggle-hamburger__arrtobottom.is-active span {
  background-color: #135772;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.toggle-hamburger.toggle-hamburger__arrtobottom.is-active span::before, .toggle-hamburger.toggle-hamburger__arrtobottom.is-active span::after {
  background-color: #135772;
  width: 50%;
}
.toggle-hamburger.toggle-hamburger__arrtobottom.is-active span::before {
  top: 0;
  -webkit-transform: translateX(38px) translateY(4px) rotate(45deg);
          transform: translateX(38px) translateY(4px) rotate(45deg);
}
.toggle-hamburger.toggle-hamburger__arrtobottom.is-active span::after {
  bottom: 0;
  -webkit-transform: translateX(38px) translateY(-4px) rotate(-45deg);
          transform: translateX(38px) translateY(-4px) rotate(-45deg);
}

СТИЛЬ №4 – Превращение в “галочку” (To Check Icon)

Этот стиль можно считать производным от предыдущего с той разницей, что средний бар мы скрываем, а ширину уменьшаем только у верхнего бара. Вот CSS:

.toggle-hamburger.toggle-hamburger__check span {
  background-color: #ff9650;
  -webkit-transition: background 0s, transform 0.3s;
  transition: background 0s, transform 0.3s;
}
.toggle-hamburger.toggle-hamburger__check span::before, .toggle-hamburger.toggle-hamburger__check span::after {
  background-color: #ff9650;
}
.toggle-hamburger.toggle-hamburger__check span::before {
  -webkit-transform-origin: top right;
          transform-origin: top right;
  -webkit-transition: width 0.3s, top 0.3s, -webkit-transform 0.3s;
  transition: width 0.3s, top 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, width 0.3s, top 0.3s;
  transition: transform 0.3s, width 0.3s, top 0.3s, -webkit-transform 0.3s;
}
.toggle-hamburger.toggle-hamburger__check span::after {
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-transition: width 0.3s, bottom 0.3s, -webkit-transform 0.3s;
  transition: width 0.3s, bottom 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, width 0.3s, bottom 0.3s;
  transition: transform 0.3s, width 0.3s, bottom 0.3s, -webkit-transform 0.3s;
}
/* when menu open: */
.toggle-hamburger.toggle-hamburger__check.is-active span {
  background: none;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.toggle-hamburger.toggle-hamburger__check.is-active span::before, .toggle-hamburger.toggle-hamburger__check.is-active span::after {
  background-color: #d05300;
  left: -8px;
}
.toggle-hamburger.toggle-hamburger__check.is-active span::before {
  top: 8px;
  -webkit-transform: translateX(8px) translateY(4px) rotate(45deg);
          transform: translateX(8px) translateY(4px) rotate(45deg);
}
.toggle-hamburger.toggle-hamburger__check.is-active span::after {
  bottom: -8px;
  -webkit-transform: translateX(38px) translateY(-4px) rotate(-45deg);
          transform: translateX(38px) translateY(-4px) rotate(-45deg);
  width: 50%;
}

Немного JavaScript

Все это немного бесполезно, если нет возможности увидеть фактические активные версии значков, поэтому для этого нам нужен будет кусочек JavaScript, который переключает у нашей кнопки класс is-active при нажатии на нее:

(function() {

  "use strict";

  var toggles = document.querySelectorAll(".toggle-hamburger");

  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.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
    });
  }

})();

На этом все.

проспект И.Мазепы 5 07300 Украина, Киевская обл., г. Вышгород, +38 (093) 636 78 08
Рассказать друзьям:

comments powered by Disqus