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

Досить популярний запит, як зробити меню гамбургера. Я покажу вам варіант з використанням 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, можете подивитися це все у відеоформаті: