Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення

🗓️ Оновлено: 30.08.2022
💬Коментарів: 10
👁️Переглядів: 27367

Досить популярний запит, як зробити меню гамбургера. Я покажу вам варіант з використанням 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
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Стаття була корисною?
👍
Так - 106
👎
Ні - 20
💬Коментарі:
Андрій

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

Володимир

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

Артем

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

Максим

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

Андрей

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

Влад

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

Володимир

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

Алекс

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

Юрий

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

Светлана

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

Залишити відповідь до Влад Скасувати відповідь

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Наш рейтинг
🏆Найкращий хостинг для сайту
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 27367
Поява елементів при скролі
Переглядів: 23788
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 14737
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 12966
Як змінити колір SVG у CSS
Переглядів: 10325
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Viva Magenta
🤔Колір 2023 року
Дослідницький інститут Pantone обрав головний колір 2023 року. Ним став карміново-червоний відтінок із фіолетовим підтоном, який назвали Viva Magenta.
#bb2649