<nav class="navigation">
    <button aria-expanded="false" aria-controls="menu">Menu</button>
    <ul id="menu" hidden>
        <li><a href="/">Home</a></li>
        <li><a href="/benefits">Benefits</a></li>
        <li><a href="/pricing">Pricing</a></li>
        <li><a href="/blog">Blog</a></li>
    </ul>
</nav>
[hidden] { display: none; }
const toggleMenu = document.querySelector(".navigation button");
const menu = document.querySelector(".navigation ul");

toggleMenu.addEventListener("click", function () {
  const open = JSON.parse(toggleMenu.getAttribute("aria-expanded"));
  toggleMenu.setAttribute("aria-expanded", !open);
  menu.hidden = !menu.hidden;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.