Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение

🗓️ Обновлено: 15.08.2022
💬Комментариев: 21
👁️Просмотров: 85543

Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение

Достаточно популярный запрос, как сделать гамбургер меню. Я покажу вам вариант с использованием html, css и js. Это адаптивный вариант, то есть он будет работать и на мобильных устройствах.

Демо

Начнем с того, что создадим html разметку. Пропишем header и внутрь добавим нашу «иконку» гамбургера (это просто три элемента span):

<header>
	<div class="menu-btn">
		<span></span>
		<span></span>
		<span></span>
	</div>
</header>

А теперь добавим наше меню, которое будет появляться, когда пользователь нажмет на гамбургер:

<div class="menu">
	<nav>
	   <ul>
		<li><a href="#">Главная</a></li>
		<li><a href="#">О нас</a></li>
		<li><a href="#">Услуги</a></li>
		<li><a href="#">Контакты</a></li>
	   </ul>
	</nav>
</div>

Добавим стили для 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) {
	top: calc(50% + 5px);
}

Сейчас у нас все это выглядит вот так:

Меню выглядит не очень. Давайте это исправим, добавив стили:

/* Меню, которое будет появляться */
.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 {
	list-style-type: none;
}

Логика в следующем: сейчас мы скрыли меню за пределы экрана с помощью свойства 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) {
  top: 50%;
  transform: translate(-50%, 0%) rotate(-45deg); 
}

А теперь в 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 Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Статья была полезной?
👍
Да - 197
👎
Нет - 42
💬Комментарии:
Андрей

Спасибо за код.
А как сделать, чтобы меню скрывалось по клику на любой пункт меню, а не только по крестику?

Илья

Повесьте на ссылки обработчик на клик. Если у бургера есть класс «active», то пусть при клике на ссылку он убирается.

Виктория

Добрый вечер! Что делать, если сначала идет крестик, как-будто бы бургер уже нажат изначально. как исправить? Помогите, пожалуйста.

Кирилл

Как сделать так, чтобы гамбургер срабатывал и на телефоне, а то он только на пк работает

Илья

Медиазапросы используйте

Владимир

код адаптивный — работает и на десктопе, и на мобильном девайсе

Михаил

как закрыть менющку кликом с любой части страницы а не только кликом на него самого ??? )

Володимир

За допомогою js. Ось відео, які допоможе зрозуміти: https://youtu.be/pGMoJD89uMY

Zhibek

Добрый день, а как его можно спрятать при большом расширении, а когда при мобильно версии отобразить? с помощью display: none в основном css и при адаптировании display: block?

Володимир

Так, це норм варіант 👍🏻

Кирилл

При нажатии на бургер меню скрывается, а сам бургер смещается в центр страницы. Как это исправить?

Андрій

Володимир, добрий день!
Сподобався Ваш урок, але є питання. Я спробував зробити з Вашим прикладом подкатегорії за допомогою псевдокласу hover і нічого не виходить.
Зможете допомогти?

Володимир

Добрий день. Так, відправте ваш код, глянемо.

Артем

Здравствуйте. А как сделать так, чтобы при нажатии на гамбургер, крестик не появлялся, и просто меню выпадало вниз? То есть бургер должен оставаться иконкой….

Максим

.menu {
display: none;
}
.menu . active {
display: block;
}

Андрей

копирую в Вижуал код
подключаю css js и не работает?
есть идеи почему?

Влад

Код не валідний. Батьком li не може бути nav

Володимир

дякую за уважність, так пропустив тег ul

Алекс

Благодарю! Всё без воды и предельно ясно. Для новичка — самое то! Продолжайте в том же духе.

Юрий

Спасибо, очень помогло при создании гамбургера, все доступно и ясно описано, буду дальше читать данный сайт.

Светлана

Благодарю! Очень помог Ваш код разобраться с темой «гамбургер-меню». Смотрела другие примеры, но они были слишком запутанными и сложными, и, когда пыталась их применить в своём проекте, не всё срабатывало, как надо.
У вас же код простой и понятный.

Добавить комментарий для Кирилл Отменить ответ

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Наш рейтинг
🏆Лучшие биржи ссылок
4.8
2
4.0
3.8
4
GoGetLinks
3.5
5
Miralinks
3.5
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Peach Fuzz
🤔Цвет 2024 года
Исследовательский институт Pantone выбрал главный цвет 2024 года. Им стал нежный бархатистый персиковый оттенок, получивший название Peach Fuzz (Персиковый пух).
#febe98