css бургер меню анимация
Анимируем «иконки-гамбургеры» для меню на чистом CSS
Дата публикации: 2015-03-31
От автора: Коллекция анимированных «иконок-гамбургеров» для меню на чистом CSS с переключением состояний (обычного и активного (когда меню открыто)) при клике.
Вступление
«Иконка-гамбургер» для меню стала одним из ключевых элементов на многих веб-сайтах и приложениях, и, нравится она вам или нет, но такая иконка стала узнаваемой и используемой кнопкой пользовательского интерфейса. Пользователи ассоциируют данную иконку с показом/скрытием меню. Она является компактной и очень практичной, т.к. экономит место, особенно на небольших экранах. Раньше вы могли вы создать или скачать подобную иконку и вставить ее в ваш документ. Это все хорошо и здорово, и если вы используете спрайты изображений, то вы стремитесь к легкой реализации.
Сегодня же я, наоборот, собираюсь показать вам, как создать популярную «иконку-гамбургер» на чистом CSS. С ростом числа мобильных устройств, с приходом анимации в CSS и появлением таких спецификаций по дизайну, как «Material Design» от компании Google, пользователи уже начинают ждать более интерактивного опыта взаимодействия. В демо-примерах мы создадим несколько классных анимаций для наших иконок, чтобы показать, что иконка является «активной» или, точнее, что меню открыто. Для реализации этого я буду использовать совсем чуть-чуть JavaScript. Хорошо, давайте приступать!
Общая разметка
Я буду создавать 4 разных демо-примера. Разметка для каждой из кнопок будет почти одинаковой. Для каждой кнопки будет задан один общий и один уникальный класс. Каждая кнопка состоит из родительского тега button и тега span внутри. Родительский тег будет выполнять роль контейнера для иконки. Это позволит нам добавлять внутренние отступы и фоновые цвета для иконки. Тег span будет местом для размещения «полосок гамбургера». Вот разметка:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Готовим бургер меню на CSS, HTML и JQuery
Готовим бургер меню на CSS, HTML и JQuery
Приправим этот день приятным вкусом гамбургера! Как известно, верстальщики — это особый тип гурманов, который увлеченно прячет вкусняшки в разных частях сверстанной страницы, например, в меню. Вы только посмотрите, как постарался верстальщик, упаковавший такой длинный список пунктов меню в маленький трехэтажный гамбургер. Еще и добавил анимационный спецэффект: начинка из гамбургера высыпается с небольшой задержкой, так что нижний и верхний слои бургера успевают наклониться и образовать крестик!
Предлагаю закодить этот фокус в своем текстовом редакторе! И первым шагом на пути к бургеру будет техническое задание:
Техническое задание:
У нас имеются готовые html и css файлы со стандартным горизонтальным меню в шапке сайта и отличным юзабилити для просмотра страницы на широком экране. В настоящий момент меню выглядит следующим образом:
Текущий HTML-файл:
Текущий CSS-файл:
Шапочка выглядит пустовато: я не стала размещать логотип и другие элементы, чтобы не отвлекаться от работы с меню. Несмотря на это, при сужении экрана пункты меню наползают друг на друга и шапка превращается в хаос. Поэтому нужно для экранов мобильных устройств, то есть для таких гаджетов, у которых ширина менее 768px:
1. Приготовить аппетитный бургер и расположить его в верхней левой части экрана. Бургер должен выглядеть как на изображении ниже:
2. Создать скрипт, реагирующий на клик мыши по иконке бургера. При клике левой кнопки мыши, средний слой должен плавно исчезать, а верхний и нижний слои — менять углы наклона и образовывать крестик.
3. Создать CSS-стили для вертикального меню, которое будет открываться при клике по иконке бургера.
4. Создать анимацию плавного выдвижения вертикального меню из левого края страницы.
В итоге должно получиться адаптивное меню, которое разворачивается в горизонтальную плашку на широких экранах и сворачивается в приятный бургер на экранах мобильных устройств.
Инструменты: HTML, CSS, JQuery
1. Рисуем бургер меню в левом верхнем углу шапки
В соотсветствии с html-структурой, для бургер-меню у нас заготовлен блок с классом «menu-burger__header»:
Над этим блоком мы и поколдуем!
Так как потребность в бургере порождена желанием адаптировать меню к мобильным устройствам, то css-стили для узких экранов шириной менее 768px мы будем записывать внутри медиазапроса: @media(max-width: 767px)
Откроем css-файл и в самом конце файла разместим медиазапрос: «@media(max-width: 767px)< >» Между скобками медиазапроса расположим стили для класса «menu-burger__header»:
После этого можно сохранить стили и обновить страницу — бургер создан!
Дополнительно для мобильной версии я уменьшила высоту шапки и немного сдвинула вверх контентную часть:
В результате меню приобрело следующий вид:
Хм.. Бургер выглядит хорошо, однако, сползшее вниз меню мешает получить дозу эстетического удовольствия и требует хотя бы временно скрыть горизонтальное меню с виду. Для этого я внесу дополнение в css стили для узких экранов:
Теперь я довольна результатом и предлагаю двигаться дальше:
2. Пишем скрипт анимации бургера при клике мыши.
Пришло время подключить тяжелую артиллерию, а именно: JQuery! Для этого перед закрывающим тегом
Tasty CSS-animated hamburgers
Table of Contents
Usage
Using Hamburgers for your site is easy (well, that was my intention anyway).
Download and include the CSS in the of your site:
Add the base hamburger markup:
Append the class name of the type of hamburger you’re craving:
Here’s the list of hamburger-type classes you can choose from:
Trigger the active state by appending class name is-active :
Since the class name would have to be toggled via JavaScript and implementation would differ based on the context of how you plan on using the hamburger, I’m going to leave the rest up to you. Stuck? Here‘s a hint.
Here’s a snippet of how to toggle a class name on click with JavaScript:
.scss source files are available if you use Sass as your CSS precompiler. It’s customizable and modular.
Hamburgers is available via npm, yarn and Bower.
Also available as a Ruby gem to use within your Rails application—see below for more information.
Or to manually install it, download and unzip the source code from Github. Then copy the files from the _sass/hamburgers directory into your project.
Import the hamburgers.scss file in your Sass manifest file:
Compile your Sass*, and voila!
* Be sure to run the CSS through Autoprefixer since the Sass doesn’t account for vendor prefixes.
Install for Ruby on Rails
Add Hamburgers to your Gemfile.
** More information on why Sass’s native @import + why you should ditch Sprockets directives altogether.
Customization
To override default settings, declare them before importing Hamburgers:
You can also create a separate file (e.g. hamburgers-settings.scss ) with those declarations, then import it along with Hamburgers:
Here is the full list of default settings (found in _sass/hamburgers/hamburgers.scss );
ems or rems
Not satisfied?
Dig into _base.scss or types/ and customize to your heart’s content. Fair warning: It‘s pretty delicate and may break, especially if you tweak the animations themselves.
Accessibility
Hamburger menu icons can be useful in the right context, but they’re not the most accessible.
ARIA will help make it accessible to people with disabilities.
If you insist on using
A label can help make it more obvious that it toggles a menu.
CSS анимация иконки гамбургер меню
В сегодняшнем уроке мы рассмотрим несколько вариантов CSS-анимации для иконки гамбургер-меню.
Гамбургер-меню стало привычным атрибутом большинства сайтов. Лаконичный вид иконки и ее хорошая читабельность даже на маленьких экранах способствует повсеместному применению. Также вы могли заметить, что сейчас все чаще основное меню прячут под гамбургер даже на полноэкранных версиях.
Вместе с упрощением интерфейсов при создании страниц все чаще применяется легкая анимация, которая сигнализирует об изменениях. Например, смена состояния иконки меню при открытом и закрытом меню.
В нашем примере мы создадим четыре разных стиля для иконки меню. Позже вы сможете самостоятельно создавать подобные иконки.
HTML разметка
Разметка довольно проста. Так как у нас будет 4 разных примера, то в каркасе будем использовать код для четырех кнопок, у каждой из которых будет почти все одинаково, кроме одного класса.
Стили CSS
CSS анимация иконок
Пришло время крутить и вертеть, изменять наши кнопки с помощью анимации.
Поворот на 90 градусов
Первый пример — поворот иконки на 90 градусов при нажатии.
Превращаем гамбургер в крестик «X»
В этом примере мы верхнюю и нижнюю полоски нашей иконки гамбургера размещаем в виде крестика «Х». После нажатия вы видите небольшую задержку анимации, чтоб этот процесс был более плавным и красивым.
CSS стрелка влево и CSS стрелка вправо
В последних двух примерах мы превратим наш гамбургер в стрелки.
И фактически такой же кусок кода, только для разворота стрелки вправо.
Совсем немного JavaScript
Наша щепотка JS нужна для того, чтоб менять переключатель состоянии кнопок по клику, добавляя или удаляя соответствующий класс состояния.
Выводы
Мы научились создавать отличные анимированные кнопки для гамбургер-меню, которые можно использовать в своем проекте. Решение получилось лаконичных, легковесным и очень быстрым. При том, мы не использовали изображений и спрайтов, а ограничились только CSS анимацией.
Если у вас есть желание попрактиковаться, то попробуйте сделать еще два варианта кнопок — в форме треугольника и снежинки.
Если этот урок оказался полезным для вас, не забудьте рассказать о нем друзьям, поделившись этой записью в социальных сетях.
Меняющееся гамбургер меню на CSS
Недавно я обнаружил эту потрясающую картинку на dribbble.com от Виталия Рубцова и не мог удержаться от желания её реализовать.
В этом уроке я расскажу, как сделать такое с помощью одного CSS, без какого-либо использования JavaScript. Итак, мы увидим некоторые трюки CSS (и SCSS), которые позволят нам добиться почти такой же плавной анимации, как и этот анимированный gif.
Вот пример того, что мы будем делать:
Разметка
Начнём со структуры HTML, которую мы будем использовать. Смотри комментарии для лучшего понимания.
Начальные стили SCSS
Теперь добавим некоторые базовые стили, чтобы получить желаемый внешний вид. Код довольно простой.
Работа переключателя
Прежде чем приступать к созданию остальной части интерфейса, добавим работу переключателя, чтобы легко переходить от одного состояния к другому.
Нужный нам HTML уже на месте. А стиль, который заставляет его работать, примерно такой:
Создание закрытого состояния
Чтобы сделать закрытое состояние, нам нужно преобразовать пункты меню в линии, чтобы получить иконку гамбургера. Есть несколько путей для получения такой трансформации. Мы решили сделать это следующим образом:
И вот код, который это реализует.
Обратите внимание, что здесь мы разместили только основные стили для пунктов навигации, который наиболее важны. Вы можете найти полный код на Github.
Создание открытого меню
Чтобы создать открытое меню, нам необходимо восстановить пункты навигации из линий в обычные текстовые ссылки, а также проделать ряд мелких изменений. Давайте посмотрим, как это сделать:
Магия в мелочах
Здесь мы используем цикл, переменную и некоторые базовые арифметические операции. Вы можете больше узнать об этих и других интересных функциях на сайте документации SASS.
Вывод
Вот мы и закончили с нашим причудливым меню! Мы также включили некоторые фиктивные элементы как в анимированном gif, и вы можете увидеть финальную демонстрацию здесь.
Итак, мы создали простое и функциональное меню только на CSS. Однако, если вы не хотите использовать систему переключения CSS, она может быть идеально заменена с помощью нескольких строк JavaScript без особых усилий.
Надеемся, этот урок оказался вам по душе и вы сочли его полезным!