Коллекция анимаций для иконок гамбургер-меню с использованием чистого 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");
});
}
})();
На этом все.