<div class="container">
  <div class="overlay"></div>
  <div class="menu__container">
    <div class="menu">
      <ul>
        <li>Очень</li>
        <li>красивое</li>
        <li>меню</li>
      </ul>
    </div>

  </div>
</div>

    <button>Show menu</button>
body {
  padding: 0;
  margin: 0;
}

button {
  position: absolute;
  left: 50%;
  top: 20%
}

.container {
  position: relative;
  width: 100%;
  height: 700px;
}

.overlay {
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.overlay.active {
  display: block;
}


.menu {
  width: 500px;
  height: 100%;
  position: absolute;
  z-index: 2;
  top: 0;
  background-color: blue;
  transform: translateX(-100%);
  transition: transform .2s ease-in-out;
  color: #fff;
  font-size: 18px;
}


.menu.is-active {
  transform: translateX(0);
}

.menu__container {
  background-color: green;
}


const btn = document.querySelector("button");
const menu = document.querySelector(".menu");
const menuContainer = document.querySelector(".menu__container");
const overlay = document.querySelector(".overlay");
btn.addEventListener("click", () => {
  menu.classList.add("is-active");
  overlay.classList.add("active");
});

document.addEventListener("click", ({target}) => {
  // тут мы проверяем, содержит ли наш меню контейнер элемент, по которому кликнули
  // и если не содержит - закрываем сайдбар с меню

  // спойлер: контейнер не содержит в себе оверлей и поэтому при клике по оверлею меню закрывается
  if(!menuContainer.contains(target)) {
    menu.classList.remove("is-active")
    overlay.classList.remove("active");
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js