Mønstre til dropdowns og popovers

HTML Popover API'et (Chrome 114+, bredt understøttet) giver en deklarativ vis/skjul-adfærd: attributten popover på målelementet og popovertarget på udløserknappen. Der kræves ingen JavaScript til grundlæggende åbning og lukning, herunder lukning ved klik uden for elementet og håndtering af Escape-tasten.

Mål popover-elementer med [popover] eller :popover-open. Pseudo-elementet ::backdrop kan bruges til at dæmpe baggrunden. Popovers gengives i det øverste lag ligesom dialoger, så du undgår problemer med z-index-stabling.

CSS Anchor Positioning (Chrome 125+) placerer en popover i forhold til sin udløser uden JavaScript: anchor-name: --btn på udløseren, position-anchor: --btn på popoveren og derefter top: anchor(bottom); left: anchor(left) for at justere den under udløseren.

Uden Anchor Positioning kan du bruge en positioneret overordnet wrapper: position: relative på beholderen og position: absolute; top: 100%; left: 0 på rullemenuen. Det fungerer på tværs af browsere, men kræver, at udløseren og rullemenuen er søskende i en positioneret beholder.

Stil rullemenuen 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. Menupunkter bruger indvendig afstand, hover-baggrund og visning i fuld bredde.

Animér åbning og lukning af popovers med @starting-style til indgangen og transition-behavior: allow-discrete for at animere ændringen af egenskaben display. Det muliggør ind- og udgangsanimationer, der kun bruger CSS og følger popoverens åbne eller lukkede tilstand.

Rullemenuer skal understøtte tastaturet: Piletaster navigerer mellem menupunkter, Enter/Space aktiverer det fokuserede menupunkt, og Escape lukker menuen og returnerer fokus til udløseren. Popover API'et håndterer Escape automatisk, mens navigation med piletaster kræver håndtering af JavaScript-hændelser.

Til en tilpasset rullemenu, der ikke bruger popover API'et, skal du tilføje aria-haspopup="listbox" og aria-expanded til udløseren, role="listbox" til listen samt role="option" og aria-selected til hvert menupunkt. Skærmlæsere annoncerer den udvidede tilstand og antallet af menupunkter.

En rullemenu, der placeres under sin udløser, kan løbe ud over visningsområdet i bunden. Registrér dette med IntersectionObserver eller getBoundingClientRect, og vend rullemenuen, så den placeres over udløseren. CSS Anchor Positioning håndterer dette med position-try-fallbacks.

Nestede rullemenuer (undermenuer) gør løsningen mere kompleks. Placér undermenuer til højre for deres overordnede menupunkter. Tilføj en forsinkelse, før de skjules ved mouseout, ved hjælp af CSS transition-delay eller et JavaScript-tidsudløb, så undermenuer ikke lukkes under diagonal musebevægelse.

Rullemenuer, der udløses ved hover, fungerer ikke på berøringsenheder — de har ingen hover-tilstand. Brug klik- eller trykudløsere overalt. Lukning ved tryk uden for elementet fungerer via Popover API'ets lukning ved klik uden for elementet eller en kliklytter på document, der lukker åbne rullemenuer.

Popover API'et og CSS Anchor Positioning gør det sammen muligt at bruge deklarative mønstre til rullemenuer og popovers med et minimum af JavaScript. For bredere browserunderstøttelse fungerer mønstre med positionerede beholdere pålideligt. Tastaturtilgængelighed, ARIA-attributter, håndtering af sammenstød med visningsområdet og understøttelse af berøringsenheder fuldender produktionsklare rullemenuer.