Modèles de menus déroulants et fenêtres contextuelles

L’API des fenêtres contextuelles HTML (Chrome 114+, largement prise en charge) fournit un comportement déclaratif d’affichage et de masquage : l’attribut popover sur la cible et popovertarget sur le bouton déclencheur. Aucun JavaScript n’est nécessaire pour les ouvertures et fermetures de base, y compris la fermeture au clic extérieur et la gestion de la touche Échap.

Ciblez les éléments de fenêtre contextuelle avec [popover] ou :popover-open. Le pseudo-élément ::backdrop est disponible pour assombrir l’arrière-plan. Les fenêtres contextuelles sont rendues dans la couche supérieure comme les boîtes de dialogue : aucun problème d’empilement lié au z-index.

Le positionnement par ancrage CSS (Chrome 125+) positionne une fenêtre contextuelle par rapport à son déclencheur sans JavaScript : anchor-name: --btn sur le déclencheur, position-anchor: --btn sur la fenêtre contextuelle, puis top: anchor(bottom); left: anchor(left) pour l’aligner sous le déclencheur.

Sans positionnement par ancrage, utilisez un conteneur parent positionné : position: relative sur le conteneur et position: absolute; top: 100%; left: 0 sur la liste déroulante. Cette solution fonctionne dans tous les navigateurs, mais exige que le déclencheur et la liste déroulante soient des éléments frères dans un conteneur positionné.

Mettez la liste déroulante en forme avec position: absolute; background: var(--color-surface); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--spacing-1) 0; min-width: 200px. Les éléments du menu utilisent une marge intérieure, un arrière-plan au survol et un affichage pleine largeur.

Animez l’ouverture et la fermeture des fenêtres contextuelles avec @starting-style pour l’entrée et transition-behavior: allow-discrete pour animer le changement de la propriété display. Cela permet de créer uniquement en CSS des animations d’entrée et de sortie liées à l’état ouvert ou fermé de la fenêtre contextuelle.

Les menus déroulants doivent prendre en charge le clavier : les touches fléchées permettent de parcourir les éléments du menu, Entrée ou Espace active l’élément focalisé, et Échap ferme le menu et rend le focus au déclencheur. L’API des fenêtres contextuelles gère automatiquement la touche Échap ; la navigation avec les touches fléchées nécessite une gestion des événements en JavaScript.

Pour une liste déroulante personnalisée (sans utiliser l’API des fenêtres contextuelles), ajoutez aria-haspopup="listbox" et aria-expanded au déclencheur, role="listbox" à la liste, ainsi que role="option" et aria-selected à chaque élément. Les lecteurs d’écran annoncent l’état déployé et le nombre d’éléments.

Une liste déroulante positionnée sous son déclencheur peut déborder de la fenêtre d’affichage par le bas. Détectez ce cas avec IntersectionObserver ou getBoundingClientRect, puis placez la liste déroulante au-dessus du déclencheur. Le positionnement par ancrage CSS gère cela avec position-try-fallbacks.

Les listes déroulantes imbriquées (sous-menus) ajoutent de la complexité. Positionnez les sous-menus à droite de leurs éléments parents. Ajoutez un délai avant le masquage lors de la sortie de la souris (avec transition-delay en CSS ou un délai d’expiration en JS) afin d’empêcher la fermeture des sous-menus pendant un déplacement diagonal de la souris.

Les listes déroulantes déclenchées par le survol échouent sur les appareils tactiles : ceux-ci n’ont pas d’état de survol. Utilisez partout des déclencheurs par clic ou par appui. La fermeture lors d’un appui extérieur fonctionne grâce à la fermeture au clic extérieur de l’API des fenêtres contextuelles ou à un écouteur de clic sur le document qui ferme les listes déroulantes ouvertes.

Que fournit automatiquement l’API des fenêtres contextuelles, alors qu’il fallait auparavant l’implémenter avec du JavaScript personnalisé ?

L’API des fenêtres contextuelles et le positionnement par ancrage CSS permettent ensemble de créer des modèles déclaratifs de listes déroulantes et de fenêtres contextuelles nécessitant très peu de JavaScript. Pour une compatibilité plus large avec les navigateurs, les modèles fondés sur des conteneurs positionnés fonctionnent de manière fiable. L’accessibilité au clavier, les attributs ARIA, la gestion des collisions avec la fenêtre d’affichage et la prise en charge des appareils tactiles complètent des composants de liste déroulante prêts pour la production.