[CSS/JavaScript] ハンバーガーメニューを実装する方法

<!-- スマホ用メニュー -->
<section class="spmenucontainer">
  <div class="spmenu">
    <ul class="spmenu__nav">
      <li class="spmenu__navlist"><a href="/">Top</a></li>
      <li class="spmenu__navlist"><a href="/">Menu 1</a></li>
      <li class="spmenu__navlist"><a href="/">Menu 2</a></li>
      <li class="spmenu__navlist"><a href="/">Menu 3</a></li>
      <li class="spmenu__navlist"><a href="/">Menu 4</a></li>
    </ul>
  </div>
</section>  

<!-- バーガーボタン -->
<div class="burgerbtn">
  <span class="burgerbtn__border bordertop"></span>
  <span class="burgerbtn__border bordermiddle"></span>
  <span class="burgerbtn__border borderbottom"></span>
</div>

.spmenucontainer {
  height: 100vh;
  background-color: #ccc;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  top: 0;
  right: 0;
  transform: translate(100vw, 0);
  transition: .6s ease-in-out;
  opacity: .9;
}
ul {
  padding: 0;
}
li {
  list-style: none;
}
.spmenu__navlist {
  margin: 30px 0;
  text-align: center;
}
.spmenu__navlist  a {
  color: #808080;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
} 

/* バーガーボタン */
.burgerbtn {
position: relative;
display: none;
}
@media screen and (max-width: 599px) {
  .burgerbtn {
    position: fixed;
    display: block;
    width: 50px;
    height: 50px;
    top: 8px;
    right: 12px;
  }
  .burgerbtn__border {
    position: absolute;
    width: 32px;
    height: 2px;
    background-color: #808080;
    transition: .6s;
  }
  .burgerbtn__border:nth-child(1) {
    top: 13px;
    left: 11px;
  }
  .burgerbtn__border:nth-child(2) {
    top: 25px;
    left: 11px;
  }
  .burgerbtn__border:nth-child(3) {
    top: 37px;
    left: 11px;
  }
  /* メニュー開閉 */
  .spmenuvisible {
  transform: translate(0, 0);
  transition: 0.6s ease-in-out;
  transition-delay: .1s;
  }
  .invisible {
    display: none;
  }
  /* ボタン開閉時のクラス */
  .bordertop_open {
    transform: translateY(10px) rotate(45deg);
    transition: .6s;
  }
  .bordermiddle_open {
    opacity: 0;
    transform: translateX(-10px);
    transition: .6s;
  }
  .borderbottom_open {
    transform: translateY(-14px) rotate(-45deg);
    transition: .6s;
  }
}

const body = document.body;  // body 要素
const modal = document.querySelector('.modal__wrapper');  // モーダル要素
const overlay = document.querySelector('.overlay');  // モーダルの背景の要素
const button = document.querySelector('.button');   // モーダルを表示させるボタン

// ボタンをクリックした時にモーダルを表示する
button.addEventListener('click', () => {
  body.style.top = `-${window.scrollY}px`;  // スクロール量を取得して body の高さとする
  body.classList.add('backgroundfix');  // body 要素を固定してスクロールできないようにする
  modal.classList.add('visible'); // モーダルを表示
}, false);

// モーダルの背景をクリックした時にモーダルを閉じる
overlay.addEventListener('click', () => {
  modal.classList.remove('visible');  // モーダルを非表示に
  body.classList.remove('backgroundfix');  // body の固定を解除
  const top = body.style.top;  // body の高さを取得
  const topHeight = top.replace('px', '').replace('-', '');  // top から - と px を除去
  window.scrollTo(0, topHeight); // topHeight の高さまで移動
}, false);

// バーガーボタン
const burgerBtn = document.querySelector('.burgerbtn');
const burgerBtnTop = document.querySelector('.bordertop');
const burgerBtnMiddle = document.querySelector('.bordermiddle');
const burgerBtnBottom = document.querySelector('.borderbottom');
const spMenu = document.querySelector('.spmenucontainer');

burgerBtn.addEventListener('click', () => {
  // メニュー開閉
  spMenu.classList.toggle('spmenuvisible');
  burgerBtnTop.classList.toggle('bordertop_open');
  burgerBtnMiddle.classList.toggle('bordermiddle_open');
  burgerBtnBottom.classList.toggle('borderbottom_open');
});