Гамбургер меню на 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