Menu

by DelphinPRO

HTML

<button id="burger">Menu</button>

<div class="content">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus quos, praesentium velit repellat, sit sint adipisci, quae minus sed dolore similique debitis. Soluta facere ipsa labore quam asperiores officiis aperiam.</div>
  <div>Provident illum excepturi voluptatibus, quos asperiores quas sequi nihil, accusantium obcaecati qui dolorum aliquam enim saepe possimus tempora, labore ratione maiores natus, mollitia! Sapiente temporibus vitae, quas deserunt iste, ipsam!</div>
  <div>Repellat sunt aliquam neque iusto, praesentium at? Quasi asperiores cumque iure eos nisi magnam fuga. Ea maxime eligendi fugit odio atque cumque ex nisi neque unde! Ratione maiores tenetur nihil.</div>
  <div>Placeat earum adipisci dignissimos eos nesciunt qui excepturi exercitationem, quasi ea, sequi fugiat consectetur velit delectus. Labore nobis nemo aut aliquam, aspernatur, porro itaque, beatae dolorem suscipit consectetur soluta iusto!</div>
  <div>Maiores facilis, obcaecati accusamus ipsa adipisci odit aperiam, laborum dolorem praesentium nihil blanditiis veniam debitis velit itaque dolorum ea. Iure quaerat quas qui sapiente hic reiciendis aut voluptatem dolor ut.</div>
  <div>Nulla porro, deleniti doloremque recusandae aperiam in sequi repellendus velit quae molestias nesciunt adipisci perspiciatis non asperiores reprehenderit voluptas. Molestiae adipisci facere incidunt reprehenderit nobis veniam earum a quia aperiam.</div>
  <div>Esse iure, aliquid asperiores cumque ducimus ut quae. A, sit tempora doloribus aut fugiat magnam esse suscipit qui rem voluptas consequuntur sapiente maxime ratione cupiditate delectus fuga ipsum eum natus.</div>
  <div>Consequuntur atque ratione doloremque reprehenderit quisquam hic numquam, assumenda iure nobis quae a dolorum accusantium odit beatae quas, saepe in veritatis. Provident aut, dicta est. At, inventore a ratione impedit?</div>
  <div>Beatae fuga odio eligendi fugiat...

CSS

* {
  box-sizing: border-box;
}

body {
  padding: 1rem;
  font-family: sans-serif;
}

body.lock {
  overflow: hidden;
}

.content>div {
  margin: 1rem 0;
}

.menu {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 1rem;
}

.menu.show {
  display: block;
}

.menu ul {
  list-style: circle;
  padding-left: 2rem;
}

.menu ul li {
  margin: 0.5rem 0;
}

#closer {
  position: fixed;
  right: 2rem;
  top: 2rem;
}

JavaScript

const btn = document.getElementById('burger');
const menu = document.getElementById('menu');
const closer = document.getElementById('closer');

btn.addEventListener('click', function() {
  menu.classList.add('show');
	document.body.classList.add('lock');
});

closer.addEventListener('click', function() {
  menu.classList.remove('show');
	document.body.classList.remove('lock');
});