- Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
- Готовим бургер меню на CSS, HTML и JQuery
- 1. Рисуем бургер меню в левом верхнем углу шапки
- 2. Пишем скрипт анимации бургера при клике мыши.
- 3. Создаем CSS-стили для вертикального меню, которое будет открываться при клике по иконке бургера.
- 4. Создаем анимацию плавного выдвижения вертикального меню из левого края страницы.
- Зачистим шероховатости: добавим прокрутку в меню и уберем скроллинг основного текста на странице.
- Финальный код
- Как создать гамбургер-меню на сайте
- Создание разметки
- Стилизация
- Добавление функциональности
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Достаточно популярный запрос, как сделать гамбургер меню. Я покажу вам вариант с использованием 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»:
.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
После этого можно сохранить стили и обновить страницу — бургер создан!
Дополнительно для мобильной версии я уменьшила высоту шапки и немного сдвинула вверх контентную часть:
В результате меню приобрело следующий вид:
Хм.. Бургер выглядит хорошо, однако, сползшее вниз меню мешает получить дозу эстетического удовольствия и требует хотя бы временно скрыть горизонтальное меню с виду. Для этого я внесу дополнение в css стили для узких экранов:
Теперь я довольна результатом и предлагаю двигаться дальше:
2. Пишем скрипт анимации бургера при клике мыши.
Пришло время подключить тяжелую артиллерию, а именно: JQuery! Для этого перед закрывающим тегом
