Как создать гамбургер меню, используя только 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 в начальное состояние. Остается немного стилизовать и наше меню готово.
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 и JQuery
Приправим этот день приятным вкусом гамбургера! Как известно, верстальщики — это особый тип гурманов, который увлеченно прячет вкусняшки в разных частях сверстанной страницы, например, в меню. Вы только посмотрите, как постарался верстальщик, упаковавший такой длинный список пунктов меню в маленький трехэтажный гамбургер. Еще и добавил анимационный спецэффект: начинка из гамбургера высыпается с небольшой задержкой, так что нижний и верхний слои бургера успевают наклониться и образовать крестик!
Текущий HTML-файл:
Текущий CSS-файл:
* < margin: 0; padding: 0; border: 0; box-sizing: border-box; >body < background: #fff; color: #313131; min-height: 100vh; font-family: 'Roboto', Helvetica; font-size: 18px; >a < color: #242e31; text-decoration: none; font-weight: 600; >header < position: fixed; width: 100%; top: 0; left: 0; z-index: 20; height:80px; background: #fff; box-shadow: 0 2px 5px 0 rgba(0,0,0,.1); display: flex; padding: 5px 0; align-items: center; justify-content: space-between; >.container < width: 100%; max-width: 1180px; margin: 0 auto; padding: 10px; position: relative; >.content-wrapper < width: 100%; >.header__nav < position: absolute; right: 36px; display: block; >.header__menu < display: flex; position: relative; z-index: 2; >.header__menu li < list-style: none; margin: 0px 0px 0px 36px; font-size: 16px; text-transform: uppercase; text-decoration: none; >.content-wrapper
Шапочка выглядит пустовато: я не стала размещать логотип и другие элементы, чтобы не отвлекаться от работы с меню. Несмотря на это, при сужении экрана пункты меню наползают друг на друга и шапка превращается в хаос. Поэтому нужно для экранов мобильных устройств, то есть для таких гаджетов, у которых ширина менее 768px:
1. Приготовить аппетитный бургер и расположить его в верхней левой части экрана. Бургер должен выглядеть как на изображении ниже:
2. Создать скрипт, реагирующий на клик мыши по иконке бургера. При клике левой кнопки мыши, средний слой должен плавно исчезать, а верхний и нижний слои — менять углы наклона и образовывать крестик.
3. Создать CSS-стили для вертикального меню, которое будет открываться при клике по иконке бургера.
4. Создать анимацию плавного выдвижения вертикального меню из левого края страницы.
В итоге должно получиться адаптивное меню, которое разворачивается в горизонтальную плашку на широких экранах и сворачивается в приятный бургер на экранах мобильных устройств.
Инструменты: HTML, CSS, JQuery
1. Рисуем бургер меню в левом верхнем углу шапки
В соотсветствии с html-структурой, для бургер-меню у нас заготовлен блок с классом «menu-burger__header»:
Над этим блоком мы и поколдуем!
Так как потребность в бургере порождена желанием адаптировать меню к мобильным устройствам, то css-стили для узких экранов шириной менее 768px мы будем записывать внутри медиазапроса: @media(max-width: 767px)
Откроем css-файл и в самом конце файла разместим медиазапрос: «@media(max-width: 767px)< >» Между скобками медиазапроса расположим стили для класса «menu-burger__header»:
@media(max-width: 767px) < .menu-burger__header < position: relative; /* задаем относительное позиционирование */ width: 40px; /* определяем размеры блока */ height: 35px; display: block; margin-left: 10px; >>.menu-burger__header span, .menu-burger__header:after, .menu-burger__header:before < height: 3px; width: 100%; position: absolute; background: #515758; margin: 0 auto; >.menu-burger__header span < top: 21px; >.menu-burger__header:after, .menu-burger__header:before < content: ''; >.menu-burger__header:after < bottom: 5px; >.menu-burger__header:before
После этого можно сохранить стили и обновить страницу — бургер создан!
Дополнительно для мобильной версии я уменьшила высоту шапки и немного сдвинула вверх контентную часть:
header < height: 60px; >.content-wrapper
В результате меню приобрело следующий вид:
Хм.. Бургер выглядит хорошо, однако, сползшее вниз меню мешает получить дозу эстетического удовольствия и требует хотя бы временно скрыть горизонтальное меню с виду. Для этого я внесу дополнение в css стили для узких экранов:
.header__nav
Теперь я довольна результатом и предлагаю двигаться дальше:
2. Пишем скрипт анимации бургера при клике мыши.
Пришло время подключить тяжелую артиллерию, а именно: JQuery! Для этого перед закрывающим тегом
