Бургер меню на html и css
Для создания появляющегося гамбургер меню нам понадобится такая html структура:
Подробнее посмотреть как сделать бургер кнопку можно в нашей статье – Бургер кнопка для меню. Если вкратце, то мы стилизуем label как кнопку с помощью псевдоэлементов, связываем ее с чекбоксом атрибутом for и скрываем данный инпут. Теперь при клике на label у нас будет срабатывать чекбокс. Далее при помощи псевдокласса :checked и комбинатора + меняем стили кнопке для анимирования ее в крестик при клике.
Следующим этапом спозиционируем menu-list абсолютно, прижмем его к краю и с помощью transform:translateX(-100%) спрячем за экран. Далее воспользуемся для чекбокса псевдоклассом :checked и комбинатором ~ и вернем transform у menu-list в начальное состояние. Остается немного стилизовать и наше меню готово.
06 декабря 2022
Читайте также
- Бургер кнопка для меню
- Стилизация чекбокса
- Псевдокласс :is()
- Псевдокласс :not()
- Игры для изучения CSS
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Достаточно популярный запрос, как сделать гамбургер меню. Я покажу вам вариант с использованием 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 канала, можете посмотреть это все в видеоформате:
Как создать гамбургер меню, используя только 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 и JavaScript, делая навигацию удобнее для мобильных устройств.
Алексей Кодов
Автор статьи
2 июня 2023 в 11:44
Гамбургер-меню – это распространенный элемент веб-дизайна, представляющий собой иконку с тремя горизонтальными полосками. При нажатии на эту иконку открывается меню навигации, что особенно полезно на мобильных устройствах с ограниченным пространством экрана. В этой статье мы рассмотрим, как создать гамбургер-меню на сайте с использованием HTML, CSS и JavaScript.
Создание разметки
Для начала создадим HTML-разметку для нашего гамбургер-меню. Нам понадобится контейнер для меню и сама иконка гамбургера.
Стилизация
Теперь применим стили к нашему меню с помощью CSS. Сначала зададим стили для иконки гамбургера, а затем – для меню навигации.
body < margin: 0; font-family: Arial, sans-serif; >nav < display: flex; justify-content: space-between; align-items: center; background-color: #333; padding: 0 1rem; >.hamburger-menu < display: none; >.hamburger < width: 30px; height: 3px; background-color: white; margin: 5px; >.nav-links < list-style: none; display: flex; margin: 0; padding: 0; >.nav-links li a < color: white; text-decoration: none; padding: 1rem; >/* Медиазапрос для мобильных устройств */ @media (max-width: 768px) < .hamburger-menu < display: block; >.nav-links < display: none; >>
Добавление функциональности
И, наконец, добавим функциональность нашему гамбургер-меню с помощью JavaScript. Создадим функцию, которая будет открывать и закрывать меню при клике на иконку гамбургера.
document.querySelector(".hamburger-menu").addEventListener("click", () => < document.querySelector(".nav-links").classList.toggle("show-menu"); >);
Теперь у нас есть гамбургер-меню, которое открывается и закрывается при нажатии на иконку. ��
Не забудьте подключить ваш CSS и JavaScript файлы к HTML файлу.
Вот таким образом можно создать гамбургер-меню на сайте с использованием базовых технологий веб-разработки. Этот пример может быть отправной точкой для дальнейшей кастомизации и улучшения меню в соответствии с требованиями вашего проекта.
Если вы хотите углубить свои знания в веб-разработке, рекомендую ознакомиться с .