Animated menu button

<nav class="menu-demo" aria-label="Main">
  <button class="menu-button" type="button" aria-expanded="false" aria-controls="demo-menu">
    <span class="menu-icon" aria-hidden="true"><i></i><i></i><i></i></span>
    <span class="menu-text">Menu</span>
  </button>
  <ul class="menu-list" id="demo-menu" hidden>
    <li><a href="#docs">Docs</a></li>
    <li><a href="#library">Library</a></li>
    <li><a href="#blog">Blog</a></li>
  </ul>
</nav>

.menu-demo { position: relative; width: min(260px, 100%); font: 15px system-ui, sans-serif; }

.menu-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  padding: 10px 16px 10px 12px;
  border-radius: 12px;
  font: 600 15px system-ui, sans-serif;
  color: var(--fg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.menu-button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Three bars. When open, the middle one fades and the outer two rotate into an X. */
.menu-icon { position: relative; width: 20px; height: 14px; }
.menu-icon i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}
.menu-icon i:nth-child(1) { top: 0; }
.menu-icon i:nth-child(2) { top: 6px; }
.menu-icon i:nth-child(3) { top: 12px; }
[aria-expanded="true"] .menu-icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .menu-icon i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .menu-icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 16px 30px -16px rgba(0, 0, 0, 0.5);
  animation: menuIn 0.2s ease-out;
}
.menu-list a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--fg); text-decoration: none; }
.menu-list a:hover, .menu-list a:focus-visible { background: var(--surface-2); outline: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .menu-icon i { transition-duration: 0.12s; }
  .menu-list { animation: none; }
}

// Animated menu button: aria-expanded drives both the icon (via CSS) and the
// menu's visibility. Escape closes it; clicking outside closes it.

document.querySelectorAll('.menu-demo').forEach((nav) => {
  const button = nav.querySelector('.menu-button');
  const menu = nav.querySelector('.menu-list');
  const label = button.querySelector('.menu-text');

  function setOpen(isOpen, { returnFocus = false } = {}) {
    button.setAttribute('aria-expanded', String(isOpen));
    menu.hidden = !isOpen;
    label.textContent = isOpen ? 'Close' : 'Menu';
    if (returnFocus) button.focus();
  }

  button.addEventListener('click', () => setOpen(button.getAttribute('aria-expanded') !== 'true'));

  nav.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !menu.hidden) setOpen(false, { returnFocus: true });
  });

  document.addEventListener('click', (event) => {
    if (!nav.contains(event.target)) setOpen(false);
  });

  // In this demo, links just close the menu.
  menu.addEventListener('click', (event) => {
    if (event.target.closest('a')) { event.preventDefault(); setOpen(false, { returnFocus: true }); }
  });
});