Адаптивное меню-бутерброд на HTML, CSS и JavaScript

Меню-бутерброд (гамбургер-меню) - это популярный паттерн навигации для мобильных устройств. При ширине экрана меньше 768px обычное горизонтальное меню заменяется на иконку из трех полос, при клике на которую появляется вертикальное меню. Наш вариант будет расположен справа и закрываться при повторном клике на иконку или клике вне меню.

HTML структура

Создадим базовую разметку нашего меню:

<header class="header">
	<nav class="nav">
		<a href="#">Home</a>
		<a href="#">About</a>
		<a href="#">Services</a>
		<a href="#">Contact</a>
	</nav>
	<button class="hamburger">☰</button>
</header>

Базовые стили

Добавим основные CSS стили:

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background: #f8f8f8;
	position: relative;
}

.hamburger {
	display: none;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	order: 1;
}

.nav {
	display: flex;
	gap: 20px;
}

.nav a {
	text-decoration: none;
	color: #333;
}

Адаптивность

Давайте теперь сделаем так, чтобы на ширине 768px меню пряталось, а вместо него показывалась специальная иконка-гамбургер. Проделаем все по шагам.

Для начала обратите внимание на то, что в приведенном выше коде гамбургер по умолчанию скрыт, а меню показано:

.hamburger {
	display: none;
}

.nav {
	display: flex;
}

На маленьком экране нужно сделать наоборот. Гамбургер показать, а меню скрыть. Давайте скроем гамбургер:

@media (max-width: 768px) {
	.hamburger {
		display: block;
	}
}

А вот меню мы не будем прятать совсем, а уберем его за правую сторону экрана с помощью фиксированного позиционирования:

@media (max-width: 768px) {
	.nav {
		position: fixed;
		top: 0;
		right: -100%;
	}
}

На JavaScript по нажатию на кнопку гамбургера мы должны показывать меню. Для этого мы будем задавать нашему меню класс .active. При наличии этого класса мы покажем наше меню. Для этого свойство right установим в ноль (наше меню откроется с правой стороны экрана):

@media (max-width: 768px) {
	.nav.active {
		right: 0;
	}
}

На маленьком экране пункты меню должны выстраиваться в колонку. Сделаем это:

@media (max-width: 768px) {
	.nav {
		flex-direction: column;
	}
}

Пусть меню по ширине занимает 80% родителя, а по высоте - весь экран:

@media (max-width: 768px) {
	.nav {
		width: 80%;
		height: 100vh;
	}
}

Добавим свойство transition, чтобы меню плавно выплывало с правой стороны:

@media (max-width: 768px) {
	.nav {
		transition: right 0.3s;
	}
}

Назначим меню достаточно большой z-index, чтобы меню было поверх всего. А иконке бутерброда назначим z-index на 1 больше, чтобы она была поверх меню:

@media (max-width: 768px) {
	.nav {
		z-index: 1000;
	}
	
	.hamburger {
		z-index: 1001;
	}
}

Вот итоговый код для адаптивности. Помимо описанного в нем добавлены еще некоторые стили для красоты:

@media (max-width: 768px) {
	.hamburger {
		display: block;
		z-index: 1001;
	}

	.nav {
		position: fixed;
		top: 0;
		right: -100%;
		width: 80%;
		height: 100vh;
		background: #f8f8f8;
		transition: right 0.3s;
		z-index: 1000;
		padding-top: 60px;
		flex-direction: column;
		gap: 15px;
		padding: 60px 20px 20px;
	}

	.nav.active {
		right: 0;
	}

	.nav a {
		padding: 10px;
	}
}

JavaScript для управления меню

Давайте теперь напишем JavaScript код для управления меню. Сделаем так, чтобы по клику на иконку бутерброда меню показывалось или скрывалось. Также сделаем так, чтобы по клику в любое место экрана вне меню, открытое меню закрывалось.

Для начала получим ссылки на наши элементы:

let hamburger = document.querySelector('.hamburger');
let nav = document.querySelector('.nav');

Давайте теперь по клику на гамбургер будем тоглить класс active с помощью метода toggle класса classList:

hamburger.addEventListener('click', function(e) {
	e.stopPropagation();
	nav.classList.toggle('active');
});

Теперь сделаем так, чтобы по клику вне меню, открытое меню закрывалось:

document.addEventListener('click', function(e) {
	if (!nav.contains(e.target))) {
		nav.classList.remove('active');
	}
});

Итоговый код

Вот полный код нашего адаптивного меню:

<header class="header">
	<nav class="nav">
		<a href="#">Home</a>
		<a href="#">About</a>
		<a href="#">Services</a>
		<a href="#">Contact</a>
	</nav>
	<button class="hamburger">☰</button>
</header>

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background: #f8f8f8;
	position: relative;
}

.hamburger {
	display: none;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	order: 1;
}

.nav {
	display: flex;
	gap: 20px;
}

.nav a {
	text-decoration: none;
	color: #333;
}

@media (max-width: 768px) {
	.hamburger {
		display: block;
		z-index: 1001;
	}

	.nav {
		position: fixed;
		top: 0;
		right: -100%;
		width: 80%;
		height: 100vh;
		background: #f8f8f8;
		transition: right 0.3s;
		z-index: 1000;
		flex-direction: column;
		gap: 15px;
		padding: 60px 20px 20px;
	}

	.nav.active {
		right: 0;
	}

	.nav a {
		padding: 10px;
	}
}

let hamburger = document.querySelector('.hamburger');
let nav = document.querySelector('.nav');

hamburger.addEventListener('click', function(e) {
	e.stopPropagation();
	nav.classList.toggle('active');
});

document.addEventListener('click', function(e) {
	if (!nav.contains(e.target)) {
		nav.classList.remove('active');
	}
});