SSBM - バーガーメニューの統一基準

<button class="burger-button">☰</button>
<div class="menu">
  <div class="menu__overlay"></div>
  <nav>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/about">会社概要</a></li>
      <li><a href="/contact">お問い合わせ</a></li>
    </ul>
  </nav>
</div>

.menu {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: -100%;
  inline-size: 100%;
  block-size: 100dvb;
  background: white;
  transition: inset-inline-start 0.3s;
}

.menu.active {
  inset-inline-start: 0;
}

.menu__overlay {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.menu.active .menu__overlay {
  opacity: 1;
  visibility: visible;
}

<button class="burger-btn" aria-label="メニューを開く" aria-expanded="false">☰</button>

const button = document.querySelector('.burger-button');
const menu = document.querySelector('.menu');
const overlay = menu.querySelector('.menu__overlay');

button.addEventListener('click', () => {
  const isActive = menu.classList.toggle('active');

  button.setAttribute('aria-expanded', isActive);
});

overlay.addEventListener('click', () => {
  menu.classList.remove('active');
  button.setAttribute('aria-expanded', 'false');
});