Адаптивное меню бургер на HTML + CSS и jQuery

Как сделать правильное адаптивное меню бургер на html + css и jQuery.

Готовый код с некоторыми комментариями.

Код скопирован как есть со всеми табами из VSCode!

Поэтому можно спокойно копировать себе и он будет правильно отформатирован.

Но лучше Html, Css и jQuery брать из demo — страницы в исходном коде через ctrl+U. Там возможны актуальные изменения и комментарии.

Адаптивное меню с бургером вариант 1

HTML-код

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="menu.css">
<title>Responsive menu</title>
</head>

<body>
<div class="wrapper">
<header class="header">
<div class="container">
<div class="header__body">
<a href="#" class="header__logo">
<img src="logo.png" alt="Адаптивное меню бургер на HTML + CSS и jQuery">
</a>
<div class="header__burger">
<span></span>
</div>
<nav class="header-menu">
<ul class="header-menu__list">
<li><a href="" class="header-menu__link">Первый</a></li>
<li><a href="" class="header-menu__link">Второй</a></li>
<li><a href="" class="header-menu__link">Третий</a></li>
<li><a href="" class="header-menu__link">Четвертый</a></li>
<li><a href="" class="header-menu__link">Пятый</a></li>
<li><a href="" class="header-menu__link">Шестой</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="content">
<div class="container">
<div class="content-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam suscipit tenetur nesciunt, cumque quidem quasi officia eveniet eos nulla repellat, reprehenderit nisi fuga omnis provident. Eum enim consequatur veniam. Perspiciatis, temporibus voluptas? Id, placeat amet iure atque ipsam soluta eum quaerat necessitatibus perspiciatis enim non quas autem. Ex eaque eveniet praesentium eligendi temporibus saepe ipsam quasi unde neque, fugiat quas repudiandae maiores! Obcaecati ducimus eos, pariatur fugiat asperiores nam exercitationem, dignissimos, sunt dolores sint tenetur aperiam. Id, minima, enim fuga iste explicabo corporis excepturi ullam modi earum quae reiciendis tenetur quod dignissimos quibusdam quaerat? Architecto dolore, enim asperiores repellat aperiam ratione veritatis culpa a, maiores voluptas fugiat illo dolores sit animi doloribus! Reprehenderit harum nam reiciendis optio dolor aliquid similique facilis quis dolore quae officia aut quo, distinctio nemo magnam commodi in eligendi exercitationem, odit perspiciatis. Saepe nam veritatis, explicabo nisi odio culpa neque illum, dolore deleniti provident fugiat deserunt quisquam quasi non sunt quia quis, eum corrupti ullam vitae perferendis! Vel dicta mollitia nisi nemo repellendus facilis delectus? Asperiores, temporibus rerum excepturi porro sequi hic ipsam dolores deleniti dicta? In tempore quidem, consectetur rerum magni dolorum nulla nihil, consequuntur odio quos numquam doloribus unde, est illum repellat atque itaque excepturi aliquid nemo laboriosam animi autem? Magnam error amet fugit, voluptas dolorem voluptatum asperiores autem tempora cupiditate ipsa praesentium? Minus necessitatibus quaerat illum non quae, tempore reiciendis cum assumenda ex amet architecto optio quia voluptatum eveniet praesentium commodi, quidem sint ullam incidunt vel laudantium. Nostrum dolor minima quibusdam in soluta, qui excepturi quam sint veniam aspernatur quo sed distinctio asperiores laudantium voluptatum quas amet obcaecati magni dolorum doloribus mollitia! In quo maxime perferendis ab eos incidunt error laudantium fuga, doloremque voluptatibus dolor qui quas impedit voluptatem ratione eligendi accusamus quasi! Cum asperiores consequuntur hic, quisquam non repellat corporis, necessitatibus ipsam sint ab nulla sapiente itaque impedit aliquid ad sit. Cumque iste eaque dolores non, voluptates asperiores esse nihil sequi! Explicabo id eligendi beatae amet itaque dolor ut quasi, dicta facere, modi molestias optio quisquam ea distinctio illo eos excepturi voluptatibus harum exercitationem consectetur. Animi dolorem error nihil odit incidunt minima fugit laudantium optio autem natus alias nisi nemo beatae perferendis recusandae consectetur possimus sequi quia porro quo, itaque quam voluptatibus! Mollitia veritatis ex ea sint delectus quaerat accusantium molestias consectetur obcaecati! Quasi cumque quidem, ullam ipsam consequuntur maiores natus illo quam accusantium corporis aliquam aperiam, odio quos illum, odit culpa obcaecati possimus quas velit? Numquam sapiente earum a esse doloremque cum deserunt neque! Aliquam, sed tempora sequi in sit facilis nulla qui assumenda rem voluptatem neque ipsam dignissimos, iste ad deleniti a consequatur voluptas, dolores corrupti nobis culpa harum maxime maiores incidunt? Aspernatur asperiores, porro earum hic non et error eaque dolorum similique dignissimos officiis, culpa esse doloribus quisquam, neque quos accusantium fugit nihil id quas officia necessitatibus! Ad officia porro odio dolore id sapiente beatae laboriosam facilis nemo illo magni non quae dolorum tempora, soluta accusamus iusto! Reprehenderit ducimus, animi ea voluptas ab voluptatem voluptatibus iusto dignissimos cupiditate pariatur!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam suscipit tenetur nesciunt, cumque quidem quasi officia eveniet eos nulla repellat, reprehenderit nisi fuga omnis provident. Eum enim consequatur veniam. Perspiciatis, temporibus voluptas? Id, placeat amet iure atque ipsam soluta eum quaerat necessitatibus perspiciatis enim non quas autem. Ex eaque eveniet praesentium eligendi temporibus saepe ipsam quasi unde neque, fugiat quas repudiandae maiores! Obcaecati ducimus eos, pariatur fugiat asperiores nam exercitationem, dignissimos, sunt dolores sint tenetur aperiam. Id, minima, enim fuga iste explicabo corporis excepturi ullam modi earum quae reiciendis tenetur quod dignissimos quibusdam quaerat? Architecto dolore, enim asperiores repellat aperiam ratione veritatis culpa a, maiores voluptas fugiat illo dolores sit animi doloribus! Reprehenderit harum nam reiciendis optio dolor aliquid similique facilis quis dolore quae officia aut quo, distinctio nemo magnam commodi in eligendi exercitationem, odit perspiciatis. Saepe nam veritatis, explicabo nisi odio culpa neque illum, dolore deleniti provident fugiat deserunt quisquam quasi non sunt quia quis, eum corrupti ullam vitae perferendis! Vel dicta mollitia nisi nemo repellendus facilis delectus? Asperiores, temporibus rerum excepturi porro sequi hic ipsam dolores deleniti dicta? In tempore quidem, consectetur rerum magni dolorum nulla nihil, consequuntur odio quos numquam doloribus unde, est illum repellat atque itaque excepturi aliquid nemo laboriosam animi autem? Magnam error amet fugit, voluptas dolorem voluptatum asperiores autem tempora cupiditate ipsa praesentium? Minus necessitatibus quaerat illum non quae, tempore reiciendis cum assumenda ex amet architecto optio quia voluptatum eveniet praesentium commodi, quidem sint ullam incidunt vel laudantium. Nostrum dolor minima quibusdam in soluta, qui excepturi quam sint veniam aspernatur quo sed distinctio asperiores laudantium voluptatum quas amet obcaecati magni dolorum doloribus mollitia! In quo maxime perferendis ab eos incidunt error laudantium fuga, doloremque voluptatibus dolor qui quas impedit voluptatem ratione eligendi accusamus quasi! Cum asperiores consequuntur hic, quisquam non repellat corporis, necessitatibus ipsam sint ab nulla sapiente itaque impedit aliquid ad sit. Cumque iste eaque dolores non, voluptates asperiores esse nihil sequi! Explicabo id eligendi beatae amet itaque dolor ut quasi, dicta facere, modi molestias optio quisquam ea distinctio illo eos excepturi voluptatibus harum exercitationem consectetur. Animi dolorem error nihil odit incidunt minima fugit laudantium optio autem natus alias nisi nemo beatae perferendis recusandae consectetur possimus sequi quia porro quo, itaque quam voluptatibus! Mollitia veritatis ex ea sint delectus quaerat accusantium molestias consectetur obcaecati! Quasi cumque quidem, ullam ipsam consequuntur maiores natus illo quam accusantium corporis aliquam aperiam, odio quos illum, odit culpa obcaecati possimus quas velit? Numquam sapiente earum a esse doloremque cum deserunt neque! Aliquam, sed tempora sequi in sit facilis nulla qui assumenda rem voluptatem neque ipsam dignissimos, iste ad deleniti a consequatur voluptas, dolores corrupti nobis culpa harum maxime maiores incidunt? Aspernatur asperiores, porro earum hic non et error eaque dolorum similique dignissimos officiis, culpa esse doloribus quisquam, neque quos accusantium fugit nihil id quas officia necessitatibus! Ad officia porro odio dolore id sapiente beatae laboriosam facilis nemo illo magni non quae dolorum tempora, soluta accusamus iusto! Reprehenderit ducimus, animi ea voluptas ab voluptatem voluptatibus iusto dignissimos cupiditate pariatur!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam suscipit tenetur nesciunt, cumque quidem quasi officia eveniet eos nulla repellat, reprehenderit nisi fuga omnis provident. Eum enim consequatur veniam. Perspiciatis, temporibus voluptas? Id, placeat amet iure atque ipsam soluta eum quaerat necessitatibus perspiciatis enim non quas autem. Ex eaque eveniet praesentium eligendi temporibus saepe ipsam quasi unde neque, fugiat quas repudiandae maiores! Obcaecati ducimus eos, pariatur fugiat asperiores nam exercitationem, dignissimos, sunt dolores sint tenetur aperiam. Id, minima, enim fuga iste explicabo corporis excepturi ullam modi earum quae reiciendis tenetur quod dignissimos quibusdam quaerat? Architecto dolore, enim asperiores repellat aperiam ratione veritatis culpa a, maiores voluptas fugiat illo dolores sit animi doloribus! Reprehenderit harum nam reiciendis optio dolor aliquid similique facilis quis dolore quae officia aut quo, distinctio nemo magnam commodi in eligendi exercitationem, odit perspiciatis. Saepe nam veritatis, explicabo nisi odio culpa neque illum, dolore deleniti provident fugiat deserunt quisquam quasi non sunt quia quis, eum corrupti ullam vitae perferendis! Vel dicta mollitia nisi nemo repellendus facilis delectus? Asperiores, temporibus rerum excepturi porro sequi hic ipsam dolores deleniti dicta? In tempore quidem, consectetur rerum magni dolorum nulla nihil, consequuntur odio quos numquam doloribus unde, est illum repellat atque itaque excepturi aliquid nemo laboriosam animi autem? Magnam error amet fugit, voluptas dolorem voluptatum asperiores autem tempora cupiditate ipsa praesentium? Minus necessitatibus quaerat illum non quae, tempore reiciendis cum assumenda ex amet architecto optio quia voluptatum eveniet praesentium commodi, quidem sint ullam incidunt vel laudantium. Nostrum dolor minima quibusdam in soluta, qui excepturi quam sint veniam aspernatur quo sed distinctio asperiores laudantium voluptatum quas amet obcaecati magni dolorum doloribus mollitia! In quo maxime perferendis ab eos incidunt error laudantium fuga, doloremque voluptatibus dolor qui quas impedit voluptatem ratione eligendi accusamus quasi! Cum asperiores consequuntur hic, quisquam non repellat corporis, necessitatibus ipsam sint ab nulla sapiente itaque impedit aliquid ad sit. Cumque iste eaque dolores non, voluptates asperiores esse nihil sequi! Explicabo id eligendi beatae amet itaque dolor ut quasi, dicta facere, modi molestias optio quisquam ea distinctio illo eos excepturi voluptatibus harum exercitationem consectetur. Animi dolorem error nihil odit incidunt minima fugit laudantium optio autem natus alias nisi nemo beatae perferendis recusandae consectetur possimus sequi quia porro quo, itaque quam voluptatibus! Mollitia veritatis ex ea sint delectus quaerat accusantium molestias consectetur obcaecati! Quasi cumque quidem, ullam ipsam consequuntur maiores natus illo quam accusantium corporis aliquam aperiam, odio quos illum, odit culpa obcaecati possimus quas velit? Numquam sapiente earum a esse doloremque cum deserunt neque! Aliquam, sed tempora sequi in sit facilis nulla qui assumenda rem voluptatem neque ipsam dignissimos, iste ad deleniti a consequatur voluptas, dolores corrupti nobis culpa harum maxime maiores incidunt? Aspernatur asperiores, porro earum hic non et error eaque dolorum similique dignissimos officiis, culpa esse doloribus quisquam, neque quos accusantium fugit nihil id quas officia necessitatibus! Ad officia porro odio dolore id sapiente beatae laboriosam facilis nemo illo magni non quae dolorum tempora, soluta accusamus iusto! Reprehenderit ducimus, animi ea voluptas ab voluptatem voluptatibus iusto dignissimos cupiditate pariatur!</p>
</div>
</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.6.3.min.js" crossorigin="anonymous"></script>
<script src="menu.js"></script>
</body>

</html>

CSS-код меню сверху

*,*:before, *:after { /*обнуление всего и вся*/
	padding: 0;
	margin: 0;
	border: 0;
	box-sizing: border-box;
}

.container {
	max-width: 1180px; /*ограничиваем контейнер*/
	margin: 0 auto; /*выравниваем посередине*/
	padding: 0 10px; /*отступ по бокам*/
}

/* HEADER BEGIN */
.header {
	position: fixed; /*фиксируем шапку вверху экрана*/
	top: 0;
	left: 0;

	width: 100%; /*растягиваем на весь экран, т.к. position:fixed*/
	z-index: 50;
}
.header:before { /*делаем плашку, которая перекроет меню в адаптиве*/
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;

	width: 100%;
	height: 100%;
	background-color: #313d49;
}
.header__body {
	display: flex;
	position: relative;

	height: 70px;
	justify-content: space-between;
	align-items: center;
}
.header__logo {
	flex: 0 0 60px; /*ширина картинки логотипа*/
	border-radius: 50%;
	overflow: hidden;
	height: 60px;
	background-color: yellow;
	z-index: 3;
}
.header__logo img {
	display: block;
	max-width: 100%;
}
.header-menu {
}
.header-menu__list {
	display: flex;
	position: relative;
	z-index: 3;
}
.header-menu__list li {
	list-style: none;
	margin: 0 0 0 20px;
}
.header-menu__link {
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
}
.header__burger {
	display: none;
}

@media (max-width:768px) {
	.lock {
		overflow: hidden; /*блокировать скролл при открытии меню*/
	}
	.header__body {
		height: 50px;
	}
	.header__logo {
		flex: 0 0 35px;
		height: 35px;
	}
	.header__burger {
		display: block;
		position: relative;
		z-index: 3;

		width: 30px;
		height: 20px;
	}
	.header__burger:before,
	.header__burger:after {
		content:'';
		position: absolute;
		left: 0;

		background-color: #fff;
		width: 100%;
		height: 2px;
		transition: all 0.3s ease;
	}
	.header__burger:before {
		top: 0;
	}
	.header__burger:after {
		bottom: 0;
	}
	.header__burger span {
		position: absolute;
		left: 0;
		top: 9px;

		background-color: #fff;
		width: 100%;
		height: 2px;
		transition: all 0.3s ease;
	}
	.header__burger.active:before {
		transform: rotate(45deg);
		top: 9px;
	}
	.header__burger.active:after {
		transform: rotate(-45deg);
		bottom: 9px;
	}
	.header__burger.active span {
		transform: scale(0)
	}
	.header-menu {
		position: fixed;
		top: -100%;
		left: 0;

		width: 100%;
		height: 100%;
		background-color: #0e112e;
		padding: 70px 0 10px 10px;
		overflow: auto; /*Чтобы появился скролл у меню, если оно длиннее экрана*/
		transition: all 0.3s ease;
	}
	.header-menu.active {
		top: 0;
	}
	.header-menu__list {
		display: block;
	}
	.header-menu__list li {
		margin: 0 0 10px 0;
	}
}
/* HEADER END */

.content {
	padding: 90px 0 0 0;
}
@media (max-width:768px) {
	.content {
		padding: 60px 0 0 0;
	}
}

jQuery-код

$(document).ready(function() {
	$('.header__burger').click(function() {
		$('.header__burger,.header-menu').toggleClass('active'); /*тоггл - при клике добавляет/убирает класс active*/
		$('body').toggleClass('lock'); /*тоже самое с тегом Body*/
	});
});

Demo — меню сверху

CSS-код меню снизу

*,*:before, *:after { /*обнуление всего и вся*/
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1180px; /*ограничиваем контейнер*/
  margin: 0 auto; /*выравниваем посередине*/
  padding: 0 10px; /*отступ по бокам*/
}

/* HEADER BEGIN */
.header {
  position: fixed; /*фиксируем шапку вверху экрана*/
  bottom: 0;
  left: 0;

  width: 100%; /*растягиваем на весь экран, т.к. position:fixed*/
  z-index: 50;
}
.header:before { /*делаем плашку, которая перекроет меню в адаптиве*/
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;

  width: 100%;
  height: 100%;
  background-color: #313d49;
}
.header__body {
  display: flex;
  position: relative;

  height: 70px;
  justify-content: space-between;
  align-items: center;
}
.header__logo {
  flex: 0 0 60px; /*ширина картинки логотипа*/
  border-radius: 50%;
  overflow: hidden;
  height: 60px;
  background-color: yellow;
  z-index: 3;
}
.header__logo img {
  display: block;
  max-width: 100%;
}
.header-menu {
}
.header-menu__list {
  display: flex;
  position: relative;
  z-index: 3;
}
.header-menu__list li {
  list-style: none;
  margin: 0 0 0 20px;
}
.header-menu__link {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
}
.header__burger {
  display: none;
}

@media (max-width:768px) {
  .lock {
    overflow: hidden; /*блокировать скролл при открытии меню*/
  }
  .header__body {
    height: 50px;
  }
  .header__logo {
    flex: 0 0 35px;
    height: 35px;
  }
  .header__burger {
    display: block;
    position: relative;
    z-index: 3;

    width: 30px;
    height: 20px;
  }
  .header__burger:before,
  .header__burger:after {
    content:'';
    position: absolute;
    left: 0;

    background-color: #fff;
    width: 100%;
    height: 2px;
    transition: all 0.3s ease;
  }
  .header__burger:before {
    top: 0;
  }
  .header__burger:after {
    bottom: 0;
  }
  .header__burger span {
    position: absolute;
    left: 0;
    top: 9px;

    background-color: #fff;
    width: 100%;
    height: 2px;
    transition: all 0.3s ease;
  }
  .header__burger.active:before {
    transform: rotate(45deg);
    top: 9px;
  }
  .header__burger.active:after {
    transform: rotate(-45deg);
    bottom: 9px;
  }
  .header__burger.active span {
    transform: scale(0)
  }
  .header-menu {
    position: fixed;
    bottom: -100%;
    left: 0;

    width: 100%;
    height: 100%;
    background-color: #0e112e;
    padding: 70px 0 10px 10px;
    overflow: auto; /*Чтобы появился скролл у меню, если оно длиннее экрана*/
    transition: all 0.3s ease;
  }
  .header-menu.active {
    top: 0;
  }
  .header-menu__list {
    display: block;
  }
  .header-menu__list li {
    margin: 0 0 10px 0;
  }
}
/* HEADER END */

.content {
  padding: 0 0 90px 0;
}
@media (max-width:768px) {
  .content {
    padding: 0 0 60px 0;
  }
}

Отличия только в стилях. Как по мне, меню снизу сильно удобнее на телефоне.

Demo — меню снизу

211523cookie-checkАдаптивное меню бургер на HTML + CSS и jQuery