<nav id="menu" aria-label="primaria">
  <button id="menu-trigger" aria-expanded="false">Menú</button>
  <ul class="main-nav">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Nosotros</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>
.main-nav {
  display: none;

  .is-active & {
    display: block;
  }
}
View Compiled
const menuTrigger = document.getElementById('menu-trigger');
const menu = document.getElementById('menu');

menuTrigger.addEventListener('click', () => {
  menuTrigger.setAttribute(
    'aria-expanded',
    menuTrigger.getAttribute('aria-expanded') === 'false' 
        ? 'true'
      : 'false'
  )
  menu.classList.toggle("is-active");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.