Анимируем «иконки-гамбургеры» для меню на чистом CSS

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

От автора: Коллекция анимированных «иконок-гамбургеров» для меню на чистом CSS с переключением состояний (обычного и активного (когда меню открыто)) при клике.

скачать исходникидемо

Вступление

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

Сегодня же я, наоборот, собираюсь показать вам, как создать популярную «иконку-гамбургер» на чистом CSS. С ростом числа мобильных устройств, с приходом анимации в CSS и появлением таких спецификаций по дизайну, как «Material Design» от компании Google, пользователи уже начинают ждать более интерактивного опыта взаимодействия. В демо-примерах мы создадим несколько классных анимаций для наших иконок, чтобы показать, что иконка является «активной» или, точнее, что меню открыто. Для реализации этого я буду использовать совсем чуть-чуть JavaScript. Хорошо, давайте приступать!

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

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

<button class="cmn-toggle-switch cmn-toggle-switch__rot">
  <span>toggle menu</span>
</button>

<button class="cmn-toggle-switch cmn-toggle-switch__htx">
  <span>toggle menu</span>
</button>

<button class="cmn-toggle-switch cmn-toggle-switch__htla">
  <span>toggle menu</span>
</button>

<button class="cmn-toggle-switch cmn-toggle-switch__htra">
  <span>toggle menu</span>
</button>

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

Общий CSS

Для начала я сбросил все стили для кнопок, чтобы не было видно никаких теней, границ или другого оформления по умолчанию. Я также назначил ширину и высоту для кнопки (что пригодится нам в процессе создания анимаций), а также я скрыл текст кнопки. Вот 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: none;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
          transition: background 0.3s;
}

.cmn-toggle-switch:focus {
  outline: none;
}

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

.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 – Поворачивающаяся иконка

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

/**
 * Стиль 1
 *
 * Вращение «иконки-гамбургера» (класс rot) на 90 градусов, когда она становится активной.
 * Ничего необычного, просто переход.
 */
.cmn-toggle-switch__rot {
  background-color: #28aadc;
}

.cmn-toggle-switch__rot span {
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

/* активное состояние, т.е. меню открыто */
.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»

В этой версии «иконки-гамбургера» происходит переход из ее обычного вида в «x» путем перемещения верхней и нижней полосок в центр иконки и их дальнейшего вращения. Я использовал задержки для переходов, чтобы достичь нужного общего эффекта, т.к. мне хотелось, чтобы трансформация в «x» происходила после перемещения верхней и нижней полосок в центр иконки. Вот CSS:

/**
 * Стиль 2
 * 
 * «Гамбургер» превращается в «x» (класс htx). 
 * Берется исходное состояние, затем полоски плавно перемещаются в центр 
 * и трансформируются в «x».
*/
.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;
}

/* активное состояние, т.е. меню открыто */
.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 градусов, и верхняя и нижняя полоски анимировано образуют стрелку, указывающую влево. Вот CSS:

/**
 * Стиль 3
 *
 * «Гамбургер» превращается в стрелку, указывающую влево (класс htla).
 * Обычно подобная иконка указывает на скрытое меню, которое плавно появляется
 * с левой стороны и закрывается при повторном клике по иконке.
 */
.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;
}

/* активное состояние, т.е. меню открыто */
.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:

/**
 * Стиль 4
 *
 * «Гамбургер» превращается в стрелку, указывающую вправо (класс htra).
 * Обычно подобная иконка указывает на скрытое меню, которое плавно появляется
 * с правой стороны и закрывается при повторном клике по иконке.
 */
.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;
}

/* активное состояние, т.е. меню открыто */
.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);
}

Немного JavaScript

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

(function() {

  "use strict";

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

  for (var i = toggles.length - 1; i >= 0; i--) {
    var toggle = toggles;
    toggleHandler(toggle);
  };

  function toggleHandler(toggle) {
    toggle.addEventListener( "click", function(e) {
      e.preventDefault();
      (this.classList.contains("active") === true) ? this.classList.remove("active") : this.classList.add("active");
    });
  }

})();

Конечно, я прохожусь по всем иконкам. Однако, в вашем приложении наверняка будет только одна иконка, поэтому подредактируйте JS код под ваши нужды.

Sass «спешит на помощь»

Как я уже упомянул ранее, если вы используете Sass, ваша жизнь станет намного легче. В исходном коде все Sass переменные (всего 4 штуки) созданы для того, чтобы можно было легко редактировать размеры кнопки, толщину полосок и отступы между родительским элементом button и дочерним элементом span. Это по-настоящему экономит массу времени!

Подводя итог

Вот мы и создали наши «иконки-гамбургеры»! Не забывайте о том, что вы можете посмотреть демо-пример и скачать исходники по нижеприведенным ссылкам. А если у вас есть вопросы, пожелания или замечания, вы можете поделиться ими в комментариях.

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

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Ирина

    Спасибо, эта страничка у меня в закладках.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree