Alasvetovalikoiden ja popoverien mallit

HTML:n Popover API (Chrome 114+, laajasti tuettu) tarjoaa deklaratiivisen näyttämis- ja piilotuskäyttäytymisen: kohteessa käytettävän popover-määritteen ja käynnistävässä painikkeessa käytettävän popovertarget-määritteen. Perusavaamiseen ja -sulkemiseen ei tarvita JavaScriptiä. Tämä sisältää ulkopuolelta napsauttamalla sulkemisen sekä Esc-näppäimen käsittelyn.

Kohdistakaa popover-elementit valitsimella [popover] tai :popover-open. ::backdrop-pseudoelementtiä voi käyttää taustan himmentämiseen. Popover-elementit piirretään dialogien tavoin top layer -tasolle, joten z-index-pinoamisongelmia ei synny.

CSS Anchor Positioning sijoittaa popover-elementin suhteessa käynnistimeensä ilman JavaScriptiä (Chrome 125+): käyttäkää käynnistimessä anchor-name: --btn-, popover-elementissä position-anchor: --btn-määritystä ja kohdistakaa elementti käynnistimen alapuolelle määrityksillä top: anchor(bottom); left: anchor(left).

Ilman Anchor Positioningia käyttäkää asemoitua parent wrapper -elementtiä: säiliössä position: relative ja pudotusvalikossa position: absolute; top: 100%; left: 0. Tämä toimii eri selaimissa, mutta edellyttää, että käynnistin ja pudotusvalikko ovat sisaruksia asemoidussa säiliössä.

Tyylitelkää pudotusvalikkolista määrityksillä position: absolute; background: var(--color-surface); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--spacing-1) 0; min-width: 200px. Valikkokohteissa käytetään sisätilaa, hover-taustaa ja koko leveyden kattavaa näyttöä.

Animoikaa popover-elementin avautumista ja sulkeutumista @starting-style-säännöllä sekä käyttämällä transition-behavior: allow-discrete -määritystä display-ominaisuuden muutoksen animointiin. Näin CSS:llä voidaan toteuttaa popover-elementin avautumis- ja poistumisanimaatiot sen avoimen tai suljetun tilan perusteella.

Pudotusvalikoiden on tuettava näppäimistöä: nuolinäppäimillä navigoidaan valikkokohteiden välillä, Enter- ja välilyöntinäppäimillä aktivoidaan kohdistettu kohde, ja Esc sulkee valikon sekä palauttaa kohdistuksen käynnistimeen. Popover API käsittelee Esc-näppäimen automaattisesti, mutta nuolinäppäimillä navigointi edellyttää JavaScriptin tapahtumankäsittelyä.

Mukautetussa pudotusvalikossa, joka ei käytä popover APIa, lisätkää käynnistimeen aria-haspopup="listbox" ja aria-expanded, listaan role="listbox" sekä jokaiseen kohteeseen role="option" ja aria-selected. Ruudunlukijat ilmoittavat laajennetun tilan ja kohteiden määrän.

Käynnistimen alapuolelle sijoitettu pudotusvalikko saattaa alareunassa ylittää näkymän rajat. Havaitkaa tämä IntersectionObserverilla tai getBoundingClientRect-metodilla ja siirtäkää pudotusvalikko käynnistimen yläpuolelle. CSS Anchor Positioning käsittelee tilanteen määrityksellä position-try-fallbacks.

Sisäkkäiset pudotusvalikot eli alivalikot lisäävät monimutkaisuutta. Sijoittakaa alivalikot pääkohteidensa oikealle puolelle. Lisätkää viive ennen piilottamista hiiren poistuessa käyttämällä CSS:n transition-delay-määritystä tai JavaScriptin aikakatkaisua, jotta alivalikot eivät sulkeudu hiiren liikkuessa vinosti.

Hover-käynnisteiset pudotusvalikot eivät toimi kosketuslaitteissa, koska niissä ei ole hover-tilaa. Käyttäkää kaikkialla napsautus- tai napautuskäynnistimiä. Ulkopuolelta napauttamalla sulkeminen onnistuu Popover APIn light dismiss -toiminnolla tai document-napsautusten kuuntelijalla, joka sulkee avoimet pudotusvalikot.

Popover API ja CSS Anchor Positioning mahdollistavat deklaratiiviset, vain vähän JavaScriptiä käyttävät pudotusvalikko- ja popover-mallit. Laajemman selainyhteensopivuuden saavuttamiseksi asemoidut säiliömallit toimivat luotettavasti. Näppäimistösaavutettavuus, ARIA-määritteet, näkymän reunojen aiheuttamien törmäysten käsittely ja kosketuslaitteiden tuki viimeistelevät tuotantovalmiit pudotusvalikkokomponentit.