Как сделать бургер меню css

Меняющееся гамбургер меню на CSS

Недавно я обнаружил эту потрясающую картинку на dribbble.com от Виталия Рубцова и не мог удержаться от желания её реализовать.

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

Вот пример того, что мы будем делать:

Разметка

Начнём со структуры HTML, которую мы будем использовать. Смотри комментарии для лучшего понимания.

Начальные стили SCSS

Теперь добавим некоторые базовые стили, чтобы получить желаемый внешний вид. Код довольно простой.

Работа переключателя

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

Нужный нам HTML уже на месте. А стиль, который заставляет его работать, примерно такой:

Создание закрытого состояния

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

И вот код, который это реализует.

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

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

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

Магия в мелочах

Если мы посмотрим ближе на gif, то увидим, что все пункты меню перемещаются не одновременно, а в шахматном порядке. Мы можем сделать такое и в CSS! В принципе нам нужно выбрать каждый элемент (с помощью :nth-child ) и задать постепенное повышение значения transition-delay . Это, безусловно, повторяющаяся работа. А что если у нас будет больше элементов? Не волнуйтесь, мы можем сделать всё лучше, используя немного магии SCSS:

Здесь мы используем цикл, переменную и некоторые базовые арифметические операции. Вы можете больше узнать об этих и других интересных функциях на сайте документации SASS.

Обратите внимание, что с помощью этого кода мы получим желаемое пошаговое поведение для анимации закрытия. Нам нужно вычислить $delay , немного отличающийся для анимации открытия, чтобы получить обратно ступенчатый переход. Вроде этого:

Вывод

Вот мы и закончили с нашим причудливым меню! Мы также включили некоторые фиктивные элементы как в анимированном gif, и вы можете увидеть финальную демонстрацию здесь.

Итак, мы создали простое и функциональное меню только на CSS. Однако, если вы не хотите использовать систему переключения CSS, она может быть идеально заменена с помощью нескольких строк JavaScript без особых усилий.

Как создать гамбургер меню, используя только CSS и HTML

Андрей Крохин

👋 Привет! Сегодня мы создадим анимированное гамбургер меню только на CSS и HTML, используя не очевидный для многих новичков способ — чекбоксы.

Начнём!

Подготовим шаблон. В качестве кнопки для открытия / закрытия меню будем использовать тег <label> с свойством for . Таким образом, при клике на лейбл, будет срабатывать чекбокс.

Выглядит это пока достаточно грустно:

Добавим немного стиля для кнопки:

Теперь стилизуем само меню. По-умолчанию оно будет скрыто — visibility: hidden , а открываться будет при установки галки на чекбокс.

Возможно, вам покажется непонятной строка .menu__btn > span , а именно комбинатор > .

Этот комбинатор находит прямых потомков элементов отобранных первым селектором.

Подробнее о нём можно прочитать здесь — https://developer.mozilla.org/ru/docs/Web/CSS/Child_selectors

Открыть / закрыть меню

Отлично, со стилизацией закончили, однако меню у нас до сих пор не работает. Самое время перейти к главной теме этого туториала — как реализовать открытие / закрытие меню только на CSS, используя чекбокс?

По порядку, начиная с самого простого:

  • Свойство transform: rotate(45deg) — поворачивает элемент на 45 градусов. Поворачивая элементы кнопки меню под разным углом, мы получаем значок “крестик”, вместо горизонтальных линий.
  • Псевдокласс :checked — находит только выбранные или включенные элементы. В нашем случае при активации чекбокса он становится :сhecked . Подробнее по ссылке — https://developer.mozilla.org/ru/docs/Web/CSS/:checked
  • Комбинатор

Вот что у нас получается:

Добавим немного анимации

Для этого просто добавим свойство transition-duration: .25s следующим классам:

Гамбургер меню на CSS или JS? Часть 1

Гамбургер меню на CSS или JS? Часть 1

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

За этой кнопкой скрываются пункты меню навигации, задумка в том, что на определенной ширине экрана, кликая по иконке, пользователь сам разворачивает меню, если ему это надо. Если не надо, то он сразу переходит к просмотру контента, не отвлекаясь на меню, поскольку оно спрятано.

Активную часть этой задачи, а именно разворачивание и сворачивание пунктов гамбургер меню можно реализовать средствами JS с использованием библиотеки jQuery или на чистом CSS. Здесь сразу оговорюсь, что в CSS делается это «костыльным способом» на checkbox-ах, позже я поясню что это.

Гамбургер меню на JS

1. Верстаем обычное верхнее меню навигации с одним параграфом контентной части сайта
2. Вставляем иконку гамбургер в меню навигации

На сайте iconfinder.com находим нужную иконку, меняем цвет на нужный (Edit Icon), скачиваем в формате SVG, открываем в браузере, копируем код из веб-инспектора.

Гамбургер меню на CSS или JS.

Вставляем скопированный выше код вместо текста "Меню".

На данном этапе на десктопных разрешениях меню выглядит так, SVG иконку мы скрыли, прописав следующий код.

.menuBurger <
display: none; /* иконка гамбургер скрыта */
>

Гамбургер меню на CSS или JS.

3. Переходим к медиа-запросу

На маленькой ширине экрана, от нуля до 530 пикселей. Нам надо сделать наоборот, показать иконку гамбургер меню и спрятать все пункты меню, стоящие в ряд.

@media screen and (max-width: 530px) <
.menu <
display: none; /* пункты меню скрыты */
background: #f1f2f4;
position: absolute;
>

.menu li <
float: none; /* пункты меню в столбцах */
>

.menuBurger <
display: inline-block; /* иконка гамбургер видна */
>
>

Гамбургер меню на CSS или JS.

4. Развернуть гамбургер меню

Что нужно сделать, перед тем, как раскрыть гамбургер меню? Надо временно закомментировать в CSS коде медиа-запроса /* display: none; */ и горизонтальное меню превратить в вертикальное. Для этого отменим действие float-а, добавим к медиа-запросу следующий код.

Результат на скриншоте

Гамбургер меню на CSS или JS.

Раскомментируем обратно display: none; — скроем вертикальное меню. Теперь дело осталось за малым – создать событие, чтобы при клике по иконке, разворачивалось и сворачивалось вертикальное меню.

Попробуйте уменьшить браузер и вы наглядно увидите, как работает гамбургер меню на JS

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

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

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