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

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

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

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

Вступление

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Общий CSS

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

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

Теперь у нас есть наша «иконка-гамбургер»! Давайте переходить к каждому из наших примеров.

Стиль № 1 – Поворачивающаяся иконка

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Стиль № 2 – Анимированное превращение в «X»

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

Стиль № 3 – Анимированное превращение в стрелку, указывающую влево

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

Стиль № 4 – Анимированное превращение в стрелку, указывающую вправо

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

Немного JavaScript

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

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

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

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

Подводя итог

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: , ,

Похожие статьи:

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

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

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

  1. Ирина

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree