Гамбургер меню на css с анимацией

Недавно я нашел это удивительное гамбургер меню с анимацией на dribble сделанное Виталием Рубцовым и не смог удержаться что бы не попробовать его реализовать.

В этой статье я объясню как сделать его с помощью CSS, ни одной строчки JavaScript не будет написано. Для достижения почти точно такой же анимации как на картинке, мы применим несколько приемов CSS (и SCSS).

Гамбургер меню на css с анимацией

Html разметка для гамбургер меню

Давайте начнем с html разметки которую мы будем использовать. Для лучшего понимания прочтите комментарии в коде.

Базовые CSS стили

Теперь давайте добавим немного базовых стилей. Эти css правила очень просты, думаю не вызовут у вас трудностей в понимании.

Функциональность открытия и закрытия

Перед созданием остальных элементов интерфейса, давайте добавим функциональность переключения состояний меню.
Код html мы уже написали теперь дело за scss, добавим следующие правила.

Создание меню в закрытом состоянии

Что бы создать закрытое состояние, нам нужно трансформировать элементы меню в линии что бы создать иконку гамбургер меню. Есть несколько вариантов решения, мы решили остановится на следующем:

burger menu на css

Ниже код который воплощает это в жизнь.

Обратите внимание, что здесь только основные стили для элементов навигации, они самые важные. Вы можете посмотреть весь код на github.

Создание открытого меню

Для создания открытого меню нам нужно преобразовать обратно элементы меню из линий в текстовые ссылки. Давайте взглянем как это сделать.

Магия в деталях

We can do that in CSS too! Basically we need to select each element (using :nth-child) and set a progressively increased transition-delay. But that is certainly a repetitive work. And, what if we have more items? Don’t worry, we can do it better with a bit of SCSS magic:

Если мы посмотрим внимательно на gif изображение с меню, мы заметим что все элементы меню появляются и скрываются не одновременно, а друг за другом. Мы также можем сделать с помощью SCSS!

В основном нам нужно выбрать каждый элемент (используя :nth-child) и задать свойство transition-delay с значением которое увеличивается постоянно. Согласитесь, это очень рутинная работа. И что если у нас будет огромное количество элементов меню? В такой ситуации мы можем использовать преимущества SCSS.

Здесь мы используем цикл, переменную и немного простых арифметических операций. С помощью этого кода мы получим постепенную анимацию элементов. Задержку мы просчитываем с помощью следующей строки:

Подведем итоги

Так мы добавили элементы которые есть на gif изображении и вы можете посмотреть финальный результат здесь.

Мы создали крутое и функциональное гамбургер меню на CSS. Так же вы можете реализовать логику изменения состояния с помощью javaScript написав пару строк кода.

Полную версию кода вы можете просмотреть на github репозитории, а так же поиграться с примером на codepen.

Мы надеемся что это статья пришлась вам по душе, и вы нашли в ней что то полезное для себя.

Автор статьи Luis Manuel редакция и перевод webupblog.

comments powered by HyperComments
alex51987
2018-06-07 12:03:13
Здравствуйте, есть предложение. Мы занимаемся продажей статьей из удаленных из интернета сайтов по 0.20$ центов за 1000 знаков. Что на 61.3% дешевле чем на биржах копирайтинга. Если вы хотите поднять посещаемость сайта, освежить сайт новым контентом, увеличить постоянную аудиторию сайта. Тогда вам нужен наш сервис - Shoptxt.ru Отписаться от рассылки -http://shoptxt.ru/dell.php?dell=WEBUPBLOG.RU ps. Зарабатывайте с нашей партнерской программой по привлечению пользователей - http://shoptxt.ru/partner.php
alex30442
2018-06-08 15:25:28
Здравствуйте, есть предложение. Мы занимаемся продажей статьей из удаленных из интернета сайтов по 0.20$ центов за 1000 знаков. Что на 61.3% дешевле чем на биржах копирайтинга. Если вы хотите поднять посещаемость сайта, освежить сайт новым контентом, увеличить постоянную аудиторию сайта. Тогда вам нужен наш сервис - Shoptxt.ru Отписаться от рассылки -http://shoptxt.ru/dell.php?dell=WEBUPBLOG.RU ps. Зарабатывайте с нашей партнерской программой по привлечению пользователей - http://shoptxt.ru/partner.php
alex91587
2018-06-10 17:17:14
Здравствуйте, есть предложение. Мы занимаемся продажей статьей из удаленных из интернета сайтов по 0.20$ центов за 1000 знаков. Что на 61.3% дешевле чем на биржах копирайтинга. Если вы хотите поднять посещаемость сайта, освежить сайт новым контентом, увеличить постоянную аудиторию сайта. Тогда вам нужен наш сервис - Shoptxt.ru Отписаться от рассылки -http://shoptxt.ru/dell.php?dell=WEBUPBLOG.RU ps. Зарабатывайте с нашей партнерской программой по привлечению пользователей - http://shoptxt.ru/partner.php
alex50797
2018-06-11 19:41:44
Здравствуйте, есть предложение. Мы занимаемся продажей статьей из удаленных из интернета сайтов по 0.20$ центов за 1000 знаков. Что на 61.3% дешевле чем на биржах копирайтинга. Если вы хотите поднять посещаемость сайта, освежить сайт новым контентом, увеличить постоянную аудиторию сайта. Тогда вам нужен наш сервис - Shoptxt.ru Отписаться от рассылки -http://shoptxt.ru/dell.php?dell=WEBUPBLOG.RU ps. Зарабатывайте с нашей партнерской программой по привлечению пользователей - http://shoptxt.ru/partner.php
alex73847
2018-06-12 15:51:29
Здравствуйте, есть предложение. Мы занимаемся продажей статьей из удаленных из интернета сайтов по 0.20$ центов за 1000 знаков. Что на 61.3% дешевле чем на биржах копирайтинга. Если вы хотите поднять посещаемость сайта, освежить сайт новым контентом, увеличить постоянную аудиторию сайта. Тогда вам нужен наш сервис - Shoptxt.ru Отписаться от рассылки -http://shoptxt.ru/dell.php?dell=WEBUPBLOG.RU ps. Зарабатывайте с нашей партнерской программой по привлечению пользователей - http://shoptxt.ru/partner.php
alex37024
2018-06-14 16:08:27
По поводу партнерства. Здравствуйте, предлогаем Вам сотруднечество. Мы знаем что для поддержания сайта вам нужно много контента. Мы занимаемся восстановлениям статьей из удаленных сайтов. Все статьи имеют высокую уникальность. Предлагаем снабжать вас контентом. Контент раздаем бесплатно – http://shoptxt.ru/content.php Если вам нужно очень много контента по выгодной цене предлагаем перейти в наш магазин – http://shoptxt.ru Отписаться от рассылки -http://shoptxt.ru/dell.php?dell=WEBUPBLOG.RU
alex5961
2018-06-15 20:53:29
По поводу партнерства. Здравствуйте, предлогаем Вам сотруднечество. Мы знаем что для поддержания сайта вам нужно много контента. Мы занимаемся восстановлениям статьей из удаленных сайтов. Все статьи имеют высокую уникальность. Предлагаем снабжать вас контентом. Контент раздаем бесплатно – http://shoptxt.ru/content.php Если вам нужно очень много контента по выгодной цене предлагаем перейти в наш магазин – http://shoptxt.ru Отписаться от рассылки -http://shoptxt.ru/dell.php?dell=WEBUPBLOG.RU
alex40491
2018-06-16 16:15:18
По поводу партнерства. Здравствуйте, предлогаем Вам сотруднечество. Мы знаем что для поддержания сайта вам нужно много контента. Мы занимаемся восстановлениям статьей из удаленных сайтов. Все статьи имеют высокую уникальность. Предлагаем снабжать вас контентом. Контент раздаем бесплатно – http://shoptxt.ru/content.php Если вам нужно очень много контента по выгодной цене предлагаем перейти в наш магазин – http://shoptxt.ru Отписаться от рассылки -http://shoptxt.ru/dell.php?dell=WEBUPBLOG.RU
alex98676
2018-06-17 14:52:17
По поводу партнерства. Здравствуйте, предлогаем Вам сотруднечество. Мы знаем что для поддержания сайта вам нужно много контента. Мы занимаемся восстановлениям статьей из удаленных сайтов. Все статьи имеют высокую уникальность. Предлагаем снабжать вас контентом. Контент раздаем бесплатно – http://shoptxt.ru/content.php Если вам нужно очень много контента по выгодной цене предлагаем перейти в наш магазин – http://shoptxt.ru Отписаться от рассылки -http://shoptxt.ru/dell.php?dell=WEBUPBLOG.RU
alex98856
2018-06-20 11:42:40
По поводу партнерства. Здравствуйте, предлогаем Вам сотруднечество. Мы знаем что для поддержания сайта вам нужно много контента. Мы занимаемся восстановлениям статьей из удаленных сайтов. Все статьи имеют высокую уникальность. Предлагаем снабжать вас контентом. Контент раздаем бесплатно – http://shoptxt.ru/content.php Если вам нужно очень много контента по выгодной цене предлагаем перейти в наш магазин – http://shoptxt.ru Отписаться от рассылки -http://shoptxt.ru/dell.php?dell=WEBUPBLOG.RU
alex15857
2018-06-21 18:57:55
По поводу партнерства. Здравствуйте, предлогаем Вам сотруднечество. Мы знаем что для поддержания сайта вам нужно много контента. Мы занимаемся восстановлениям статьей из удаленных сайтов. Все статьи имеют высокую уникальность. Предлагаем снабжать вас контентом. Контент раздаем бесплатно – http://shoptxt.ru/content.php Если вам нужно очень много контента по выгодной цене предлагаем перейти в наш магазин – http://shoptxt.ru Отписаться от рассылки -http://shoptxt.ru/dell.php?dell=WEBUPBLOG.RU
alex63785
2018-06-23 18:12:56
По поводу партнерства. Здравствуйте, предлогаем Вам сотруднечество. Мы знаем что для поддержания сайта вам нужно много контента. Мы занимаемся восстановлениям статьей из удаленных сайтов. Все статьи имеют высокую уникальность. Предлагаем снабжать вас контентом. Контент раздаем бесплатно – http://shoptxt.ru/content.php Если вам нужно очень много контента по выгодной цене предлагаем перейти в наш магазин – http://shoptxt.ru Отписаться от рассылки -http://shoptxt.ru/dell.php?dell=WEBUPBLOG.RU
alex16672
2018-06-24 15:21:33
По поводу партнерства. Здравствуйте, предлогаем Вам сотруднечество. Мы знаем что для поддержания сайта вам нужно много контента. Мы занимаемся восстановлениям статьей из удаленных сайтов. Все статьи имеют высокую уникальность. Предлагаем снабжать вас контентом. Контент раздаем бесплатно – http://shoptxt.ru/content.php Если вам нужно очень много контента по выгодной цене предлагаем перейти в наш магазин – http://shoptxt.ru Отписаться от рассылки -http://shoptxt.ru/dell.php?dell=WEBUPBLOG.RU
alex44239
2018-07-04 11:38:36
По поводу партнерства. Здравствуйте, предлогаем Вам сотруднечество. Мы знаем что для поддержания сайта вам нужно много контента. Мы занимаемся восстановлениям статьей из удаленных сайтов. Все статьи имеют высокую уникальность. Предлагаем снабжать вас контентом. Контент раздаем бесплатно – http://shoptxt.ru/content.php Если вам нужно очень много контента по выгодной цене предлагаем перейти в наш магазин – http://shoptxt.ru Отписаться от рассылки -http://shoptxt.ru/dell.php?dell=WEBUPBLOG.RU
alex35068
2018-07-05 15:42:02
По поводу партнерства. Здравствуйте, предлогаем Вам сотруднечество. Мы знаем что для поддержания сайта вам нужно много контента. Мы занимаемся восстановлениям статьей из удаленных сайтов. Все статьи имеют высокую уникальность. Предлагаем снабжать вас контентом. Контент раздаем бесплатно – http://shoptxt.ru/content.php Если вам нужно очень много контента по выгодной цене предлагаем перейти в наш магазин – http://shoptxt.ru Отписаться от рассылки -http://shoptxt.ru/dell.php?dell=WEBUPBLOG.RU
alex35782
2018-07-08 15:06:59
По поводу партнерства. Здравствуйте, предлогаем Вам сотруднечество. Мы знаем что для поддержания сайта вам нужно много контента. Мы занимаемся восстановлениям статьей из удаленных сайтов. Все статьи имеют высокую уникальность. Предлагаем снабжать вас контентом. Контент раздаем бесплатно – http://shoptxt.ru/content.php Если вам нужно очень много контента по выгодной цене предлагаем перейти в наш магазин – http://shoptxt.ru Отписаться от рассылки -http://shoptxt.ru/dell.php?dell=WEBUPBLOG.RU