El “menú hamburguesa” es un patrón típico en móviles: un botón (icono de 3 líneas) que abre/cierra la navegación. La idea clave es simple: mostrar u ocultar el menú con una clase CSS, y controlar esa clase con JavaScript.

1) HTML recomendado

Necesitas un botón y un contenedor para los enlaces. Importante: el botón debe ser un <button> (no un <div>) y conviene añadir atributos ARIA.

<header class="topbar">
  <a class="logo" href="/">Recetas</a>

  <button
    id="menuBtn"
    class="menu-btn"
    aria-controls="mainNav"
    aria-expanded="false"
    aria-label="Abrir menú"
  >
    ☰
  </button>

  <nav id="mainNav" class="nav" hidden>
    <a href="#inicio">Inicio</a>
    <a href="#recetas">Recetas</a>
    <a href="#videos">Vídeos</a>
    <a href="#otros">Otros</a>
  </nav>
</header>

2) CSS: ocultar/mostrar con una clase

En móvil, ocultas el menú por defecto. Al abrir, aplicas una clase (por ejemplo .is-open).

.nav[hidden] { display: none; }

.nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0;
}

@media (min-width: 900px) {
  .menu-btn { display: none; }
  .nav { flex-direction: row; padding: 0; }
  .nav[hidden] { display: flex; }
}

3) JavaScript: toggle

const btn = document.querySelector("#menuBtn");
const nav = document.querySelector("#mainNav");

btn.addEventListener("click", () => {
  const isOpen = btn.getAttribute("aria-expanded") === "true";

  btn.setAttribute("aria-expanded", String(!isOpen));
  btn.setAttribute("aria-label", isOpen ? "Abrir menú" : "Cerrar menú");

  if (isOpen) {
    nav.setAttribute("hidden", "");
  } else {
    nav.removeAttribute("hidden");
  }
});

4) Mejoras rápidas (muy recomendadas)

• Cerrar al clicar un enlace (en móvil).
• Cerrar con ESC para accesibilidad y UX.
• Bloquear scroll si el menú ocupa toda la pantalla.

// Cerrar con ESC
document.addEventListener("keydown", (e) => {
  if (e.key !== "Escape") return;
  if (btn.getAttribute("aria-expanded") === "true") {
    btn.click();
  }
});