Wzorce menu rozwijanych i popoverów

HTML Popover API (Chrome 114+, szeroko obsługiwane) zapewnia deklaratywne zachowanie pokazywania i ukrywania: atrybut popover na elemencie docelowym oraz popovertarget na przycisku wyzwalającym. Do podstawowego otwierania i zamykania nie jest potrzebny JavaScript, w tym do light dismiss (zamykania po kliknięciu poza elementem) i obsługi klawisza Escape.

Elementy popover wybieraj za pomocą [popover] lub :popover-open. Pseudoelement ::backdrop jest dostępny do przyciemniania tła. Popovery są renderowane w top layer, podobnie jak dialogi, więc nie występują problemy z kontekstem stosu z-index.

CSS Anchor Positioning (Chrome 125+) pozycjonuje popover względem elementu wyzwalającego bez JavaScriptu: anchor-name: --btn na elemencie wyzwalającym, position-anchor: --btn na popoverze, a następnie top: anchor(bottom); left: anchor(left), aby wyrównać go poniżej elementu wyzwalającego.

Bez Anchor Positioning użyj opakowania nadrzędnego z pozycjonowaniem: position: relative na kontenerze oraz position: absolute; top: 100%; left: 0 na liście rozwijanej. Rozwiązanie działa w różnych przeglądarkach, ale wymaga, aby element wyzwalający i lista rozwijana były elementami sąsiadującymi w pozycjonowanym kontenerze.

Stylizuj listę rozwijaną za pomocą position: absolute; background: var(--color-surface); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--spacing-1) 0; min-width: 200px. Elementy menu wykorzystują padding, tło hover i wyświetlanie na pełną szerokość.

Animuj otwieranie i zamykanie popovera za pomocą @starting-style dla animacji wejścia oraz transition-behavior: allow-discrete, aby animować zmianę właściwości display. Umożliwia to tworzenie animacji wejścia i wyjścia wyłącznie w CSS, powiązanych ze stanem otwarcia lub zamknięcia popovera.

Menu rozwijane musi obsługiwać klawiaturę: klawisze strzałek służą do poruszania się między elementami menu, Enter/Space aktywują fokusowany element, a Escape zamyka menu i przywraca fokus elementowi wyzwalającemu. Popover API automatycznie obsługuje Escape, natomiast nawigacja klawiszami strzałek wymaga obsługi zdarzeń JavaScript.

W przypadku niestandardowej listy rozwijanej, która nie korzysta z popover API, dodaj aria-haspopup="listbox" i aria-expanded do elementu wyzwalającego, role="listbox" do listy oraz role="option" i aria-selected do każdego elementu. Czytniki ekranu ogłaszają stan rozwinięcia i liczbę elementów.

Lista rozwijana umieszczona poniżej elementu wyzwalającego może przy dolnej krawędzi wykraczać poza obszar widoku. Wykryj to za pomocą IntersectionObserver lub getBoundingClientRect i przenieś listę nad element wyzwalający. CSS Anchor Positioning obsługuje ten przypadek za pomocą position-try-fallbacks.

Zagnieżdżone listy rozwijane (podmenu) zwiększają złożoność rozwiązania. Pozycjonuj podmenu po prawej stronie elementów nadrzędnych. Dodaj opóźnienie przed ukryciem podczas mouseout, korzystając z CSS transition-delay lub JS timeout, aby podmenu nie zamykało się podczas diagonalnego ruchu myszy.

Listy rozwijane uruchamiane przez hover nie działają na urządzeniach dotykowych, ponieważ nie występuje na nich stan hover. Uniwersalnie używaj wyzwalaczy kliknięcia lub dotknięcia. Zamykanie po kliknięciu poza elementem działa dzięki funkcji light dismiss w popover API albo nasłuchiwaniu zdarzenia kliknięcia dokumentu, które zamyka otwarte listy rozwijane.

Co Popover API zapewnia automatycznie, a co wcześniej wymagało niestandardowego JavaScriptu?

Popover API i CSS Anchor Positioning razem umożliwiają deklaratywne wzorce list rozwijanych i popoverów, wymagające minimalnej ilości JavaScriptu. Aby zapewnić szerszą obsługę przeglądarek, niezawodnie działają wzorce z pozycjonowanym kontenerem. Dostępność klawiatury, atrybuty ARIA, obsługa kolizji z obszarem widoku i wsparcie urządzeń dotykowych dopełniają gotowe do użycia produkcyjnie komponenty list rozwijanych.