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

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