Mönster för rullgardinsmenyer och popovers

HTML:s Popover API (Chrome 114+, med brett stöd) tillhandahåller deklarativt visnings- och döljbeteende: attributet popover på målelementet och popovertarget på utlösarknappen. Ingen JavaScript behövs för grundläggande öppning och stängning, inklusive automatisk stängning vid klick utanför och hantering av Escape-tangenten.

Välj popover-element med [popover] eller :popover-open. Pseudoelementet ::backdrop kan användas för att tona ned bakgrunden. Popovers renderas i det översta lagret, precis som dialoger – inga problem med z-index-stapling.

CSS Anchor Positioning (Chrome 125+) positionerar en popover i förhållande till dess utlösare utan JavaScript: anchor-name: --btn på utlösaren, position-anchor: --btn på popovern och sedan top: anchor(bottom); left: anchor(left) för att justera den under utlösaren.

Utan Anchor Positioning kan du använda en positionerad överordnad omslutare: position: relative på behållaren och position: absolute; top: 100%; left: 0 på rullgardinsmenyn. Detta fungerar i alla webbläsare, men kräver att utlösaren och rullgardinsmenyn är syskon i en positionerad behållare.

Styla rullgardinslistan som position: absolute; background: var(--color-surface); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--spacing-1) 0; min-width: 200px. Menyalternativ använder padding, bakgrund vid hover och visning över hela bredden.

Animera när popovern öppnas och stängs med @starting-style för öppningsanimeringen och transition-behavior: allow-discrete för att animera ändringen av egenskapen display. Detta möjliggör CSS-baserade animeringar för öppning och stängning som är kopplade till popovern öppen- eller stängdstatus.

Rullgardinsmenyer måste stödja tangentbordet: piltangenterna navigerar mellan menyalternativ, Enter/mellanslag aktiverar det fokuserade alternativet och Escape stänger menyn och återför fokus till utlösaren. Popover API hanterar Escape automatiskt, medan navigering med piltangenter kräver händelsehantering med JavaScript.

För en anpassad rullgardinsmeny (som inte använder popover-API:et): lägg till aria-haspopup="listbox" och aria-expanded på utlösaren, role="listbox" på listan samt role="option" och aria-selected på varje alternativ. Skärmläsare meddelar om menyn är expanderad och hur många alternativ den innehåller.

En rullgardinsmeny som positioneras under sin utlösare kan hamna utanför vyportens nederkant. Upptäck detta med IntersectionObserver eller getBoundingClientRect och flytta rullgardinsmenyn ovanför utlösaren. CSS Anchor Positioning hanterar detta med position-try-fallbacks.

Kapslade rullgardinsmenyer (undermenyer) gör lösningen mer komplex. Positionera undermenyer till höger om deras överordnade alternativ. Lägg till en fördröjning innan de döljs när muspekaren lämnar dem (med CSS transition-delay eller en JS-timeout) för att förhindra att undermenyer stängs när musen rör sig diagonalt.

Rullgardinsmenyer som utlöses vid hover fungerar inte på pekskärmsenheter – där finns inget hover-tillstånd. Använd klick- eller tryckutlösare överallt. Stängning genom tryck utanför fungerar med Popover API:ets automatiska stängning eller med en click-lyssnare på dokumentet som stänger öppna rullgardinsmenyer.

Popover API och CSS Anchor Positioning möjliggör deklarativa rullgardins- och popovermönster med minimalt behov av JavaScript. För bredare webbläsarstöd fungerar mönster med positionerade behållare tillförlitligt. Tangentbordstillgänglighet, ARIA-attribut, hantering av kollisioner med vyporten och stöd för pekskärmsenheter kompletterar rullgardinsmenyer som är redo för produktion.