Меняющееся гамбургер меню на CSS
Недавно я обнаружил эту потрясающую картинку на dribbble.com от Виталия Рубцова и не мог удержаться от желания её реализовать.
В этом уроке я расскажу, как сделать такое с помощью одного CSS, без какого-либо использования JavaScript. Итак, мы увидим некоторые трюки CSS (и SCSS), которые позволят нам добиться почти такой же плавной анимации, как и этот анимированный gif.
Вот пример того, что мы будем делать:
Разметка
Начнём со структуры HTML, которую мы будем использовать. Смотри комментарии для лучшего понимания.
Начальные стили SCSS
Теперь добавим некоторые базовые стили, чтобы получить желаемый внешний вид. Код довольно простой.
/* Базовые стили */ * < box-sizing: border-box; >html, body < margin: 0; >body < font-family: sans-serif; background-color: #F6C390; >a < text-decoration: none; >.container
Работа переключателя
Прежде чем приступать к созданию остальной части интерфейса, добавим работу переключателя, чтобы легко переходить от одного состояния к другому.
Нужный нам HTML уже на месте. А стиль, который заставляет его работать, примерно такой:
// Прячем чекбокс #toggle < display: none; >// Стили для «открытого» состояния, когда чекбокс выбран #toggle:checked < // Любой элемент, стиль которого вам нужно изменить при открытии меню, идёт здесь с селектором ~ // Стили для открытия навигационного меню, к примеру & ~ .nav < >>Создание закрытого состояния
Чтобы сделать закрытое состояние, нам нужно преобразовать пункты меню в линии, чтобы получить иконку гамбургера. Есть несколько путей для получения такой трансформации. Мы решили сделать это следующим образом:
И вот код, который это реализует.
$transition-duration: 0.5s; // Отображение пунктов навигации в виде линий, составляющих иконку гамбургера .nav-item < position: relative; display: inline-block; float: left; clear: both; color: transparent; font-size: 14px; letter-spacing: -6.2px; height: 7px; line-height: 7px; text-transform: uppercase; white-space: nowrap; transform: scaleY(0.2); transition: $transition-duration, opacity 1s; // Добавление ширины для первой линии &:nth-child(1) < letter-spacing: -8px; >// Добавление ширины для второй линии &:nth-child(2) < letter-spacing: -7px; >// Настройки для элементов, начиная с четвёртого &:nth-child(n + 4) < letter-spacing: -8px; margin-top: -7px; opacity: 0; >// Получение линий для иконки гамбургера &:before < position: absolute; content: ''; top: 50%; left: 0; width: 100%; height: 2px; background-color: #EC7263; transform: translateY(-50%) scaleY(5); transition: $transition-duration; >>Обратите внимание, что здесь мы разместили только основные стили для пунктов навигации, который наиболее важны. Вы можете найти полный код на Github.
Создание открытого меню
Чтобы создать открытое меню, нам необходимо восстановить пункты навигации из линий в обычные текстовые ссылки, а также проделать ряд мелких изменений. Давайте посмотрим, как это сделать:
$transition-duration: 0.5s; #toggle:checked < // Открываем & ~ .nav < // Восстанавливаем пункты навигации из «линий» в иконке меню .nav-item < color: #EC7263; letter-spacing: 0; height: 40px; line-height: 40px; margin-top: 0; opacity: 1; transform: scaleY(1); transition: $transition-duration, opacity 0.1s; // Скрываем линии &:before < opacity: 0; >> > >Магия в мелочах
Если мы посмотрим ближе на gif, то увидим, что все пункты меню перемещаются не одновременно, а в шахматном порядке. Мы можем сделать такое и в CSS! В принципе нам нужно выбрать каждый элемент (с помощью :nth-child ) и задать постепенное повышение значения transition-delay . Это, безусловно, повторяющаяся работа. А что если у нас будет больше элементов? Не волнуйтесь, мы можем сделать всё лучше, используя немного магии SCSS:
$items: 4; $transition-delay: 0.05s; .nav-item < // Задаём задержку для пунктов навигации при закрытии @for $i from 1 through $items < &:nth-child(#) < $delay: ($i - 1) * $transition-delay; transition-delay: $delay; &:before < transition-delay: $delay; >> > >Здесь мы используем цикл, переменную и некоторые базовые арифметические операции. Вы можете больше узнать об этих и других интересных функциях на сайте документации SASS.
Обратите внимание, что с помощью этого кода мы получим желаемое пошаговое поведение для анимации закрытия. Нам нужно вычислить $delay , немного отличающийся для анимации открытия, чтобы получить обратно ступенчатый переход. Вроде этого:
$delay: ($items - $i) * $transition-delay;Вывод
Вот мы и закончили с нашим причудливым меню! Мы также включили некоторые фиктивные элементы как в анимированном gif, и вы можете увидеть финальную демонстрацию здесь.
Итак, мы создали простое и функциональное меню только на CSS. Однако, если вы не хотите использовать систему переключения CSS, она может быть идеально заменена с помощью нескольких строк JavaScript без особых усилий.
Надеемся, этот урок оказался вам по душе и вы сочли его полезным!
Бургер меню на html и css
Для создания появляющегося гамбургер меню нам понадобится такая html структура:
Подробнее посмотреть как сделать бургер кнопку можно в нашей статье – Бургер кнопка для меню. Если вкратце, то мы стилизуем label как кнопку с помощью псевдоэлементов, связываем ее с чекбоксом атрибутом for и скрываем данный инпут. Теперь при клике на label у нас будет срабатывать чекбокс. Далее при помощи псевдокласса :checked и комбинатора + меняем стили кнопке для анимирования ее в крестик при клике.
Следующим этапом спозиционируем menu-list абсолютно, прижмем его к краю и с помощью transform:translateX(-100%) спрячем за экран. Далее воспользуемся для чекбокса псевдоклассом :checked и комбинатором ~ и вернем transform у menu-list в начальное состояние. Остается немного стилизовать и наше меню готово.
06 декабря 2022
Читайте также
- Бургер кнопка для меню
- Стилизация чекбокса
- Псевдокласс :is()
- Псевдокласс :not()
- Игры для изучения CSS
Как сделать бургер меню с разной шириной линий от правого края?
Бургер появляется, но не могу понять как его перевернуть, чтобы короткая линия отталкилавалась не от левого, а от правого края.
span
display: block;
width: 37px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #000;
>
span:nth-child(2) width: 29px;
>
- Вопрос задан более года назад
- 364 просмотра
1 комментарий
Простой 1 комментарий
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Достаточно популярный запрос, как сделать гамбургер меню. Я покажу вам вариант с использованием html, css и js. Это адаптивный вариант, то есть он будет работать и на мобильных устройствах.
Начнем с того, что создадим html разметку. Пропишем header и внутрь добавим нашу «иконку» гамбургера (это просто три элемента span):
А теперь добавим наше меню, которое будет появляться, когда пользователь нажмет на гамбургер:
Добавим стили для header и для кнопки:
header < display: flex; justify-content: flex-end; >.menu-btn < width: 30px; height: 30px; position: relative; z-index:2; overflow: hidden; >.menu-btn span < width: 30px; height: 2px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #222222; transition: all 0.5s; >.menu-btn span:nth-of-type(2) < top: calc(50% - 5px); >.menu-btn span:nth-of-type(3)
Сейчас у нас все это выглядит вот так:
Меню выглядит не очень. Давайте это исправим, добавив стили:
/* Меню, которое будет появляться */ .menu < position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 15px; background: #FFEFBA; transform: translateX(-100%); transition: transform 0.5s; >.menu.active < transform: translateX(0); >.menu li
Логика в следующем: сейчас мы скрыли меню за пределы экрана с помощью свойства transform и значения translateX(-100%);
Но при клике на гамбургер мы будем добавлять меню класс .active — и он будем возвращать меню в видимую область экрана с помощью transform: translateX(0);
Давайте реализуем на JS добавление класса к меню (.menu) по клику на гамбургер (.menu-btn):
let menuBtn = document.querySelector('.menu-btn'); let menu = document.querySelector('.menu'); menuBtn.addEventListener('click', function()< menu.classList.toggle('active'); >)Мы используем toggle — чтобы удалять класс по клику, если он есть у элемента. Таким образом при клике на гамбургер у нас появляется и исчезает меню.
Если хотите, чтобы меню появлялось справа, то у класса menu измените следующее свойство:
transform: translateX(100%);
По сути, у нас готово гамбургер меню. Но давайте еще сделаем так, чтобы при клике на гамбургер, наша «иконка» превращалась в крестик.
Для этого мы будем использовать тот же фокус с добавлением класса. Для начала добавим css:
/* Меняем гамбургер иконку, когда меню открыто */ .menu-btn.active span:nth-of-type(1) < display: none; >.menu-btn.active span:nth-of-type(2) < top: 50%; transform: translate(-50%, 0%) rotate(45deg); >.menu-btn.active span:nth-of-type(3)
А теперь в js коде сделаем переключатель, как мы ранее делали для меню. Только теперь сделаем для «иконки». Получится вот так:
let menuBtn = document.querySelector('.menu-btn'); let menu = document.querySelector('.menu'); menuBtn.addEventListener('click', function()< menuBtn.classList.toggle('active'); menu.classList.toggle('active'); >)Вот вы и поняли принцип, по которому можно сделать гамбургер меню. Вариантов реализации множество, присылайте в комментариях свои решения.
Прикрепляю видео с нашего YouTube канала, можете посмотреть это все в видеоформате: