Edit in JSFiddle

<button>Меню</button>

<div class="menu">
  <button>Закрыть</button>
  <ul>
    <li><a href="#">Пункт меню</a></li>
    <li><a href="#">Пункт меню</a></li>
    <li><a href="#">Пункт меню</a></li>
    <li><a href="#">Пункт меню</a></li>
    <li><a href="#">Пункт меню</a></li>
  </ul>
</div>
.menu {
  font-family: sans-serif;
  width: 100%;
  max-width: 320px;
  background: purple;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  transition: 0.3s ease;
  transition-property: transform;
  transform: translateX(-100%);
  
  &.isOpen {
   box-shadow: 0 0 10px black, 0 0 0 9999px rgba(black, 0.5);
  transform: translateX(0);
  }
  
  a  {
    color: white;
    display: block;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(white, 0.1);
    text-decoration: none;
  }
}
document.querySelectorAll('button').forEach(button => {
  button.addEventListener('click', e => {
    e.preventDefault();
    document.querySelector('.menu').classList.toggle('isOpen');
  });
});