Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Достаточно популярный запрос, как сделать гамбургер меню. Я покажу вам вариант с использованием 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 канала, можете посмотреть это все в видеоформате:
Как создать гамбургер-меню на сайте
Узнайте, как создать гамбургер-меню на сайте с помощью 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; >>Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Добавление функциональности
И, наконец, добавим функциональность нашему гамбургер-меню с помощью JavaScript. Создадим функцию, которая будет открывать и закрывать меню при клике на иконку гамбургера.
document.querySelector(".hamburger-menu").addEventListener("click", () => < document.querySelector(".nav-links").classList.toggle("show-menu"); >);Теперь у нас есть гамбургер-меню, которое открывается и закрывается при нажатии на иконку. ��
Не забудьте подключить ваш CSS и JavaScript файлы к HTML файлу.
Вот таким образом можно создать гамбургер-меню на сайте с использованием базовых технологий веб-разработки. Этот пример может быть отправной точкой для дальнейшей кастомизации и улучшения меню в соответствии с требованиями вашего проекта.
Если вы хотите углубить свои знания в веб-разработке, рекомендую ознакомиться с
Изменение цвета гамбургер-меню на мобильных
Все сайты на Weblium являются адаптивными, а значит они автоматически подстраиваются под разные экранные разрешения. Наш конструктор создаёт мобильную версию сайта самостоятельно из всех блоков и элементов, которые вы добавили в десктопной версии.
Большие меню навигации могут занимать слишком много места на мобильном, или наоборот, могут быть слишком маленькими, чтобы их можно было прочитать или нажать на нужную ссылку. Потому всё содержимое шапки сайта на мобильных скрывается в так называемое гамбургер-меню, пока посетитель не развернёт его:
Подсказка: детальнее о принципах отображения сайтов на мобильных устройствах смотрите в статье Отображение сайтов на мобильных устройствах.
Следуйте инструкциям ниже, если хотите изменить цвет фона и иконки гамбургер-меню на мобильных.
Изменение цвета иконки гамбургер-меню через палитру сайта
Цвет иконки гамбургер-меню на мобильных устройствах зависит от тёмного или светлого оттенка в цветовой палитре сайта. Так, если у вас тёмный фон шапки сайта, гамбургер-меню будет принимать светлый оттенок из палитры сайта, а если фон шапки светлый, то гамбургер-меню будет принимать тёмный оттенок соответственно.
К примеру, фон шапки на картинке ниже считается тёмным:
Поэтому гамбургер-меню будет принимать цвет светлого оттенка из палитры:
Чтобы изменить цвет иконки гамбургер-меню, перейдите в редактор сайта, нажмите на троеточие на панели управления и откройте вкладку Стиль сайта :
Во вкладке Цвета наведите на текущую палитру сайта и нажмите Редактировать :
Подберите подходящий вам Тёмный или Светлый оттенок в палитре и нажмите Готово :
Опубликуйте свой сайт, чтобы изменения вступили в силу.
Теперь иконка гамбургер-меню будет отображаться в выбранном цвете:
Изменение цвета иконки гамбургер-меню с помощью кода
Если вы хотите установить произвольный цвет иконки гамбургер-меню, не привязываясь к палитре своего сайта, добавьте в раздел CSS следующий код:
@media (max-width: 992px){ #header ~ header span[class*="w-burger__line"] { background-color: rgb(255,255,255); } }
В часте #header на месте слова "header" (первое упоминание этого слова в коде) должно быть название якоря шапки сайта, в которой расположено нужное гамбургер-меню:
Обычно, если у вас на сайте была лишь 1 шапка сайта, то для неё код сразу будет такой, как выше. Если вы добавляли другие шапки сайта, у них в коде уже будет #header-1 ~ header , #header-2 ~ header и так далее.
Параметр rgb(255,255,255) определяет цвет иконки, и в этом примере он станет белым. Вы можете получить код нужного вам цвета с помощью этого сервиса.
Изменение цвета фона гамбургер-меню на мобильных
Если вы используете глобальную прозрачную шапку на сайте, гамбургер-меню при раскрытии всё равно будет иметь цвет в роли фона.
Например, вот так выглядит шапка сайта на мобильной версии:
А вот так она выглядит при раскрытии гамбургер-меню:
Чтобы изменить этот цвет, наведите на шапку сайта и перейдите к её настройкам, кликнув на «бегунок»:
Выключите опцию Сделать шапку прозрачной в открывшемся окне:
Теперь перейдите в настройки строки, где находится навигационное меню:
Откройте вкладку Фон и выберите цвет для фона своего гамбургер-меню:
Перейдите обратно в настройки шапки сайта и сделайте её прозрачной как раньше:
Опубликуйте свой сайт, чтобы изменения вступили в силу.
Готово! Теперь цвет фона в гамбургер-меню будет совпадать с фоном, который вы выбрали для строки в шапке:
Обновлено на: 13/10/2022
Была ли эта статья полезна?
7 не-растровых подходов для создания значка меню "гамбургер"
В этом уроке мы рассмотрим ряд подходов к созданию и оформлению такого значка без использования растровых изображений. У меня есть для вас семь вариантов, так что нам лучше поскорее перейти к делу.
Почему не растровые?
Использование изображений - это быстро и просто, так зачем искать альтернативные подходы? Вот несколько особенностей, по которым мы будем оценивать успешность каждого из возможных решений:
- Загрузка меньшего количества ресурсов уменьшает количество HTTP запросов
- Нерастровые значки для дисплеев высокой плотности можно масштабировать без ограничений как в большую, так и в меньшую сторону
- Мы можем добавить дополнительные стили и интерактивность с помощью CSS
- Да и просто интересно попробовать в этом свои силы!
#1. Использование SVG
Мы скоро рассмотрим некоторые примеры создания значка меню с помощью CSS, но мой список будет неполным без упоминания изображений SVG как жизнеспособного варианта.
Если вы не сильны в написании кода, но вы все еще хотите добиться масштабируемости изображений для дисплеев высокой плотности, векторная графика в формате SVG является отличным выбором.
SVG может использоваться несколькими способами:
SVG
SVG может быть указан в аттрибуте src тега img так же, как вы бы указывали любой другой формат изображения.
src="path/to/menu-icon.svg" alt="menu icon" width="70" height="50">
SVG в качестве background-image
То же изображение SVG также может использоваться в качестве фонового изображения в CSS
.menu-icon
width:70px;
height:50px;
background-image:url('path/to/menu-icon.svg');
SVG в виде кода
SVG также могут быть написаны в виде кода, с помощью XML. Если вы экспортируете SVG из приложения, такого как Adobe Illustrator и откроете его в редакторе кода, вы увидите, как выглядит исходный код.
Подсказка: если вы скопируете объект из Illustrator, затем вставите непосредственно в текстовый редактор, то вы также получите код SVG.
Хотя копирование и вставка XML кода в ваш шаблон страницы может показаться странным, на самом деле он позволяет изменять стиль отдельных элементов SVG с помощью CSS.
svg line
stroke: white;
Вполне недурственно, да?
Еще более впечатляющий подход состоит в применении анимации к SVG. Отличный пример анимации значка меню можно увидеть в фантастическом учебнике Кайла Хэнвуда "Создание бургер-меню кнопки на SVG и HTML".
Использование SVG в виде кода позволяет уменьшить количество запросов и производить манипуляции с помощью CSS, как показано выше. При использовании SVG в теге img или CSS свойстве background-image , единственным плюсом из моего списка является то, что такое изображение можно масштабировать.
Мы можем сделать лучше.
#2 . Использование шрифта пиктограмм
Второй подход заключается в том, чтобы использовать шрифт пиктограмм.
Шрифт пиктограмм так же, как любые другие пользовательские шрифты, добавляется через @font-face , но вместо букв алфавита, он содержит последовательность символов. Часто они добавляются на страницу через псевдо элемент :before или :after свойства content для сохранения чистоты и аккуратности разметки, не захламляя ее дополнительными элементами.
Одним из моих любимых сервисов по созданию шрифтов пиктограмм является Icomoon, который имеет библиотеку свободных шрифтов иконок, которые вы можете выбрать для создания ваших собственных.
Для создания собственного полностью пользовательского шрифта пиктограмм есть возможность загрузить свой собственный файл SVG изображения через кнопку «Импорт значков». Приложение создает шрифт и весь код, необходимый для использования вашего шрифта, либо путем загрузки файлов шрифтов и CSS, либо с использованием тега link в секции head вашей страницы для подключения версии, хранящейся на сервере. Я использовал этот сервис множество раз для проектов своих клиентов, и был всегда очень доволен!
Шрифты пиктограмм поддерживают масштабирование (хотя это все же шрифты и подвержены сглаживанию), их можно изменять с помощью CSS, но их загрузка на страницу требует дополнительных запросов для файлов шрифтов и стилей. Для более сложных иконок, как некоторые из показанных выше - это правильный подход, но когда значок меню достаточно простой, мы могли бы, вероятно, сделать это с помощью функционала CSS.
#3. Метод Bootstrap
CSS фреймворки такие как ZURB Foundation или Twitter Bootstrap очень популярны, так что возможно мы могли поучиться у этих ребят красивому и лаконичному подходу к созданию нашего значка?
JavaScript фреймворка Bootstrap автоматически сворачивает выпадающее меню для браузеров, которые меньше 768px по ширине, и заменяет его на кнопку вызова навигационной панели.
При использовании веб-инспектора, можно увидеть как был сделан их значок:
Элемент button с четырьмя элементами span внутри; три из них используются для создания горизонтальных линий значка меню, а первый - только для скрин ридеров, так как текст «Меню» позиционируется за пределами экрана.
CSS для каждого элемента icon-bar устанавливает цвет фона, а также размеры и слегка округленные углы.
.navbar-default .navbar-toggle .icon-bar
background-color: #888;