Как создать гамбургер меню, используя только CSS и HTML
�� Привет! Сегодня мы создадим анимированное гамбургер меню только на CSS и HTML, используя не очевидный для многих новичков способ — чекбоксы.
Начнём!
Подготовим шаблон. В качестве кнопки для открытия / закрытия меню будем использовать тег с свойством for . Таким образом, при клике на лейбл, будет срабатывать чекбокс.
Выглядит это пока достаточно грустно:
Добавим немного стиля для кнопки:
/* скрываем чекбокс */
#menu__toggle opacity: 0;
>/* стилизуем кнопку */
.menu__btn display: flex; /* используем flex для центрирования содержимого */
align-items: center; /* центрируем содержимое кнопки */
position: fixed;
top: 20px;
left: 20px; width: 26px;
height: 26px; cursor: pointer;
z-index: 1;
>/* добавляем "гамбургер" */
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after display: block;
position: absolute; width: 100%;
height: 2px; background-color: #616161;
>
.menu__btn > span::before content: '';
top: -8px;
>
.menu__btn > span::after content: '';
top: 8px;
>
Теперь стилизуем само меню. По-умолчанию оно будет скрыто — visibility: hidden , а открываться будет при установки галки на чекбокс.
/* контейнер меню */
.menu__box display: block;
position: fixed;
visibility: hidden;
top: 0;
left: -100%; width: 300px;
height: 100%; margin: 0;
padding: 80px 0; list-style: none;
text-align: center; background-color: #ECEFF1;
box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
>/* элементы меню */
.menu__item display: block;
padding: 12px 24px; color: #333; font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 600; text-decoration: none;
>
.menu__item:hover background-color: #CFD8DC;
>
Возможно, вам покажется непонятной строка .menu__btn > span , а именно комбинатор > .
Этот комбинатор находит прямых потомков элементов отобранных первым селектором.
Подробнее о нём можно прочитать здесь — https://developer.mozilla.org/ru/docs/Web/CSS/Child_selectors
Открыть / закрыть меню
Отлично, со стилизацией закончили, однако меню у нас до сих пор не работает. Самое время перейти к главной теме этого туториала — как реализовать открытие / закрытие меню только на CSS, используя чекбокс?
#menu__toggle:checked ~ .menu__btn > span transform: rotate(45deg);
>
#menu__toggle:checked ~ .menu__btn > span::before top: 0;
transform: rotate(0);
>
#menu__toggle:checked ~ .menu__btn > span::after top: 0;
transform: rotate(90deg);
>
#menu__toggle:checked ~ .menu__box visibility: visible;
left: 0;
>
По порядку, начиная с самого простого:
- Свойство transform: rotate(45deg) — поворачивает элемент на 45 градусов. Поворачивая элементы кнопки меню под разным углом, мы получаем значок “крестик”, вместо горизонтальных линий.
- Псевдокласс :checked — находит только выбранные или включенные элементы. В нашем случае при активации чекбокса он становится :сhecked . Подробнее по ссылке — https://developer.mozilla.org/ru/docs/Web/CSS/:checked
- Комбинатор ~ — находит элементы, указанные справа, которые следуют за элементом, указанным слева и имеют с ним общего родителя. Подробнее — https://developer.mozilla.org/ru/docs/Web/CSS/General_sibling_selectors
Вот что у нас получается:
Добавим немного анимации
Для этого просто добавим свойство transition-duration: .25s следующим классам:
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after transition-duration: .25s;
>.menu__box transition-duration: .25s;
>.menu__item transition-duration: .25s;
>
Бургер меню на html и css
Для создания появляющегося гамбургер меню нам понадобится такая html структура:
Подробнее посмотреть как сделать бургер кнопку можно в нашей статье – Бургер кнопка для меню. Если вкратце, то мы стилизуем label как кнопку с помощью псевдоэлементов, связываем ее с чекбоксом атрибутом for и скрываем данный инпут. Теперь при клике на label у нас будет срабатывать чекбокс. Далее при помощи псевдокласса :checked и комбинатора + меняем стили кнопке для анимирования ее в крестик при клике.
Следующим этапом спозиционируем menu-list абсолютно, прижмем его к краю и с помощью transform:translateX(-100%) спрячем за экран. Далее воспользуемся для чекбокса псевдоклассом :checked и комбинатором ~ и вернем transform у menu-list в начальное состояние. Остается немного стилизовать и наше меню готово.
Кнопка бургер меню для мобильного меню на чистом CSS
Здесь мы прописываем только один блок для кнопки, для примера я создал элемент с классом hamburger . Полоски будут создаваться в помощью стилей, мы будет создавать вторую и третью полоски через свойства border-bottom и border-top , а центральная полоска будет создаваться через псевдоэлемент before .
CSS
CSS код тоже простой. Здесь для понимания я все расписал.
.hamburger < position: relative; display: block; width: 50px; height: 25px; margin: 20px auto; border-top: 5px solid #fff; border-bottom: 5px solid #fff; >.hamburger:before
Ещё один вариант кнопки
.hamburger < position: relative display: flex flex-direction: column row-gap: 5px width: 50px height: fit-content margin: 20px auto >.hamburger hr < width: 100% height: 5px border: none background: #fff margin: 0 0 0 auto >.hamburger hr.line2 < width: 63% >.hamburger hr.line3
На этом всё!
Больше интересных статей в нашей группе — https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи — https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале — https://www.youtube.com/c/ProgTime
Наши планы
- Написание материала для курса по разработке ботов на Telegram
- Разработка универсального парсера на PHP
Поддержите мой сайт!
Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube
Бургер кнопка для меню
Далее идем в CSS и задаем размер нашей кнопке и сбрасываем стандартные стили фона и границ. Верхнюю и нижнюю линии мы создадим с помощью псевдоэлементов ::after и ::before , задав им ширину 100%, высоту 4px и расположив их абсолютно относительно кнопки снизу и сверху, а третью зададим как тень от одной из линий и отпустим на середину кнопки.
.burger < position: relative; border: none; background: transparent; width: 40px; height: 26px; >.burger::before, .burger::after < content: ''; left: 0; position: absolute; display: block; width: 100%; height: 4px; border-radius: 10px; background: #000; >.burger::before < top: 0; box-shadow: 0 11px 0 #000; >.burger::after
В итоге мы получаем такую бургер кнопку
Анимируем бургер кнопку на JS
Добавим кнопке анимацию при клике, кнопка будет превращаться в крестик и обратно. Для этого нам понадобится использовать немного javaScript. Получим кнопку и при клике на нее будем добавлять и удалять ей класс active.
const burger = document.querySelector('.burger'); burger.addEventListener('click', () => < burger.classList.toggle('active'); >);А в сss мы добавим стили для активной кнопки, развернем линии на 45 градусов и скроем среднюю линию, чтобы получится крест. Для плавной анимации добавим свойство transition и пропишем в нем свойства которые мы анимируем. Первым значением в transition идет анимируемое свойство, вторым время за которое происходит изменение и третьим задержка. Чтобы анимировать несколько свойств, все необходимые свойства и насторойки к ним, добавляются через запятую.
.burger::before < transition: box-shadow .3s .15s, top .3s .15s, transform .3s; >.burger::after < transition: bottom .3s .15s, transform .3s; >.burger.active::before < top: 11px; transform: rotate(45deg); box-shadow: 0 6px 0 rgba(0,0,0,0); transition: box-shadow .15s, top .3s, transform .3s .15s; >.burger.active::after
И получаем готовую бургер кнопку
Анимируем бургер кнопку без JS
Анимировать можно и без javaScript. Для этого заменим button на label и добавим ему атрибут for со значением burger-checkbox . Также перед label добавим input с типом checkbox , индинтификатором и классом burger-checkbox . Теперь при нажатии на label будет срабатывать чекбокс. Сам чекбокс мы скроем и при помощи псевдокласса :checked и комбинатора + будем изменять стиль активной кнопки, когда чекбокс выбран. Следовательно, в css заменяем селектор .burger.active на .burger-checkbox:checked + .burger .
Как сделать открывающееся бургер меню без javaScript, с использованием данной кнопки читайте в нашей статье – Бургер меню на HTML и CSS