◆ ◇ ◆
Popover API
El atributo popover convierte cualquier elemento en un popover nativo. El botón con popovertarget lo abre y cierra sin JavaScript.
◈
◆
Top Layer
El popover vive en el top layer del navegador — por encima de cualquier
z-index, incluyendo elementos fixed.◇
Auto Dismiss
Con
popover="auto", el menú se cierra automáticamente al hacer clic fuera o al pulsar la tecla Escape.◈
Accesibilidad
El navegador gestiona el foco y los atributos ARIA automáticamente. Sin librerías de accesibilidad necesarias.
<!-- HTML — cero JS para abrir y cerrar -->
<!-- 1. El trigger: apunta al popover por ID -->
<button popovertarget="nav-pop">
◈ Menú
</button>
<!-- 2. El popover: nativo del navegador -->
<div id="nav-pop" popover="auto">
<!-- contenido del menú -->
</div>
/* CSS — animar la entrada */
#nav-pop:popover-open {
animation: decoReveal 0.35s ease;
}
@keyframes decoReveal {
from { opacity: 0; clip-path: inset(0 0 100% 0); }
to { opacity: 1; clip-path: inset(0 0 0% 0); }
}