Menú H — Orgánico Cálido + dialog

Técnica H — Dialog

<dialog>
pantalla
completa

El elemento <dialog> con showModal() crea un menú de pantalla completa con gestión de foco nativa. El backdrop y el Escape son automáticos.

showModal() vs show()

showModal() crea un modal verdadero con focus trap: el foco queda atrapado dentro del diálogo. show() es no-modal.

::backdrop

El pseudoelemento ::backdrop permite estilizar el fondo detrás del dialog — no necesita overlay extra.

Escape gratis

Al pulsar Escape, el navegador cierra el dialog automáticamente. Sin eventos JS extra.

<!-- HTML -->
<dialog id="nav-dialog">
  ...links...
</dialog>

/* CSS — pantalla completa + entrada animada */
#nav-dialog {
  border: none; margin: 0;
  width: 100%; height: 100%; max-width: 100%;
  animation: dialogOpen 0.4s ease;
}
#nav-dialog::backdrop {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}

// JS
function openNav() {
  document.getElementById('nav-dialog').showModal();
}
function closeNav() {
  document.getElementById('nav-dialog').close();
}
// Escape key closes it automatically — no JS needed

<dialog>pantallacompleta

<dialog>
pantalla
completa