От автора: Коллекция анимированных «иконок-гамбургеров» для меню на чистом CSS с переключением состояний (обычного и активного (когда меню открыто)) при клике.
Вступление
«Иконка-гамбургер» для меню стала одним из ключевых элементов на многих веб-сайтах и приложениях, и, нравится она вам или нет, но такая иконка стала узнаваемой и используемой кнопкой пользовательского интерфейса. Пользователи ассоциируют данную иконку с показом/скрытием меню. Она является компактной и очень практичной, т.к. экономит место, особенно на небольших экранах. Раньше вы могли вы создать или скачать подобную иконку и вставить ее в ваш документ. Это все хорошо и здорово, и если вы используете спрайты изображений, то вы стремитесь к легкой реализации.
Сегодня же я, наоборот, собираюсь показать вам, как создать популярную «иконку-гамбургер» на чистом CSS. С ростом числа мобильных устройств, с приходом анимации в CSS и появлением таких спецификаций по дизайну, как «Material Design» от компании Google, пользователи уже начинают ждать более интерактивного опыта взаимодействия. В демо-примерах мы создадим несколько классных анимаций для наших иконок, чтобы показать, что иконка является «активной» или, точнее, что меню открыто. Для реализации этого я буду использовать совсем чуть-чуть JavaScript. Хорошо, давайте приступать!
Общая разметка
Я буду создавать 4 разных демо-примера. Разметка для каждой из кнопок будет почти одинаковой. Для каждой кнопки будет задан один общий и один уникальный класс. Каждая кнопка состоит из родительского тега button и тега span внутри. Родительский тег будет выполнять роль контейнера для иконки. Это позволит нам добавлять внутренние отступы и фоновые цвета для иконки. Тег span будет местом для размещения «полосок гамбургера». Вот разметка:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/** * Стиль 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
/** * Стиль 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
/** * Стиль 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
/** * Стиль 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, который поможет нам в этом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
(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.contains("active") === true) ? this.classList.remove("active") : this.classList.add("active"); }); } })(); |
Конечно, я прохожусь по всем иконкам. Однако, в вашем приложении наверняка будет только одна иконка, поэтому подредактируйте JS код под ваши нужды.
Sass «спешит на помощь»
Как я уже упомянул ранее, если вы используете Sass, ваша жизнь станет намного легче. В исходном коде все Sass переменные (всего 4 штуки) созданы для того, чтобы можно было легко редактировать размеры кнопки, толщину полосок и отступы между родительским элементом button и дочерним элементом span. Это по-настоящему экономит массу времени!
Подводя итог
Вот мы и создали наши «иконки-гамбургеры»! Не забывайте о том, что вы можете посмотреть демо-пример и скачать исходники по нижеприведенным ссылкам. А если у вас есть вопросы, пожелания или замечания, вы можете поделиться ими в комментариях.
Источник: //callmenick.com/
Редакция: Команда webformyself.
Комментарии (1)