Шаблоны выпадающих списков и всплывающих окон

API всплывающих окон HTML (Chrome 114+, широко поддерживается) предоставляет декларативное отображение и скрытие: атрибут popover у целевого элемента и popovertarget у кнопки-триггера. Для базового открытия и закрытия JavaScript не нужен; поддерживаются также закрытие при щелчке вне элемента и обработка клавиши Esc.

Находите элементы всплывающих окон с помощью [popover] или :popover-open. Для затемнения фона доступен псевдоэлемент ::backdrop. Всплывающие окна отображаются в верхнем слое, как диалоги, поэтому проблемы с наложением z-index не возникают.

Якорное позиционирование CSS размещает всплывающее окно относительно кнопки-триггера без JavaScript: задайте anchor-name: --btn у триггера, position-anchor: --btn у всплывающего окна, а затем top: anchor(bottom); left: anchor(left), чтобы выровнять его под триггером.

Без якорного позиционирования используйте обёртку-родителя с заданным позиционированием: position: relative для контейнера и position: absolute; top: 100%; left: 0 для выпадающего меню. Этот вариант работает в разных браузерах, но требует, чтобы триггер и выпадающее меню были соседними элементами в контейнере с позиционированием.

Стилизуйте список выпадающего меню так: position: absolute; background: var(--color-surface); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--spacing-1) 0; min-width: 200px. Для пунктов меню используйте внутренние отступы, фон при наведении и отображение на всю ширину.

Анимируйте открытие и закрытие всплывающего окна с помощью @starting-style для появления и transition-behavior: allow-discrete для анимации изменения свойства display. Это позволяет создавать только средствами CSS анимации появления и выхода, связанные с состоянием открытого или закрытого всплывающего окна.

Выпадающие меню должны поддерживать навигацию с клавиатуры: клавиши со стрелками перемещают фокус между пунктами, Enter или пробел активируют сфокусированный пункт, а Esc закрывает меню и возвращает фокус на триггер. API всплывающих окон автоматически обрабатывает Esc; навигация стрелками требует обработки событий JavaScript.

Для пользовательского выпадающего меню, не использующего API всплывающих окон, добавьте aria-haspopup="listbox" и aria-expanded к триггеру, role="listbox" к списку, а role="option" и aria-selected — к каждому пункту. Программы чтения с экрана озвучивают состояние раскрытия и количество пунктов.

Выпадающее меню, расположенное под триггером, может выйти за нижнюю границу области просмотра. Обнаружьте это с помощью IntersectionObserver или getBoundingClientRect и переместите меню над триггером. Якорное позиционирование CSS обрабатывает это с помощью position-try-fallbacks.

Вложенные выпадающие меню, то есть подменю, усложняют реализацию. Размещайте подменю справа от родительских пунктов. Добавьте задержку перед скрытием при уходе указателя мыши, используя задержку перехода CSS или таймер в JS, чтобы подменю не закрывались при диагональном перемещении мыши.

Выпадающие меню, открывающиеся при наведении, не работают на сенсорных устройствах: состояние наведения там отсутствует. Повсеместно используйте нажатие или касание как триггер. Закрытие при касании вне элемента можно реализовать через автоматическое закрытие API всплывающих окон или обработчик щелчка документа, закрывающий открытые выпадающие меню.

Что API всплывающих окон предоставляет автоматически, хотя раньше для этого требовался пользовательский JavaScript?

API всплывающих окон и якорное позиционирование CSS вместе позволяют создавать декларативные выпадающие меню и всплывающие окна с минимальным использованием JavaScript. Для более широкой поддержки браузеров надёжно работают шаблоны с позиционируемыми контейнерами. Доступность с клавиатуры, атрибуты ARIA, обработка столкновений с областью просмотра и поддержка сенсорных устройств завершают готовые к использованию компоненты выпадающих меню.