Pola Menu Tarik Turun dan Popover

API Popover HTML (Chrome 114+, didukung secara luas) menyediakan perilaku tampil/sembunyi deklaratif: atribut popover pada target dan popovertarget pada tombol pemicu. JavaScript tidak diperlukan untuk buka/tutup dasar, termasuk penutupan saat mengeklik di luar dan penanganan tombol Escape.

Sasar elemen popover dengan [popover] atau :popover-open. Elemen semu ::backdrop tersedia untuk meredupkan latar belakang. Popover dirender di lapisan teratas seperti dialog, sehingga tidak ada masalah penumpukan z-index.

Pemosisian Jangkar CSS menempatkan popover relatif terhadap pemicunya tanpa JavaScript: anchor-name: --btn pada pemicu, position-anchor: --btn pada popover, lalu top: anchor(bottom); left: anchor(left) untuk menyelaraskannya di bawah pemicu.

Tanpa Pemosisian Jangkar, gunakan wadah induk yang diposisikan: position: relative pada wadah, dan position: absolute; top: 100%; left: 0 pada menu tarik-turun. Cara ini berfungsi di berbagai peramban, tetapi mengharuskan pemicu dan menu tarik-turun menjadi elemen bersaudara dalam wadah yang diposisikan.

Tata daftar menu tarik-turun sebagai position: absolute; background: var(--color-surface); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--spacing-1) 0; min-width: 200px. Item menu menggunakan jarak dalam, latar belakang saat diarahkan, dan tampilan selebar penuh.

Animasikan buka/tutup popover menggunakan @starting-style untuk kemunculan dan transition-behavior: allow-discrete untuk menganimasikan perubahan properti display. Dengan demikian, animasi masuk/keluar hanya dengan CSS dapat dikaitkan dengan keadaan popover terbuka atau tertutup.

Menu tarik-turun harus mendukung keyboard: tombol panah menavigasi item menu, Enter/Space mengaktifkan item yang mendapat fokus, dan Escape menutup menu serta mengembalikan fokus ke pemicu. API Popover menangani Escape secara otomatis; navigasi dengan tombol panah memerlukan penanganan peristiwa JavaScript.

Menu tarik-turun kustom (yang tidak menggunakan API popover): tambahkan aria-haspopup="listbox" dan aria-expanded pada pemicu, role="listbox" pada daftar, serta role="option" dan aria-selected pada setiap item. Pembaca layar mengumumkan keadaan diperluas dan jumlah item.

Menu tarik-turun yang diposisikan di bawah pemicunya dapat meluap melewati bagian bawah area pandang. Deteksi hal ini dengan IntersectionObserver atau getBoundingClientRect, lalu balikkan menu tarik-turun ke atas pemicu. Pemosisian Jangkar CSS menangani hal ini dengan position-try-fallbacks.

Menu tarik-turun bertingkat (submenu) menambah kerumitan. Posisikan submenu di sebelah kanan item induknya. Tambahkan jeda sebelum menyembunyikannya saat tetikus keluar (menggunakan transition-delay CSS atau batas waktu JS) agar submenu tidak tertutup saat tetikus bergerak secara diagonal.

Menu tarik-turun yang dipicu saat diarahkan gagal pada perangkat sentuh karena tidak ada keadaan hover. Gunakan pemicu klik/ketuk secara universal. Penutupan saat mengetuk di luar dapat dilakukan melalui penutupan ringan API popover atau pemantau klik pada dokumen yang menutup menu tarik-turun yang terbuka.

API Popover dan Pemosisian Jangkar CSS secara bersama-sama memungkinkan pola menu tarik-turun dan popover yang deklaratif serta hanya memerlukan sedikit JavaScript. Untuk dukungan peramban yang lebih luas, pola wadah yang diposisikan dapat diandalkan. Aksesibilitas keyboard, atribut ARIA, penanganan benturan dengan area pandang, dan dukungan perangkat sentuh melengkapi komponen menu tarik-turun yang siap digunakan dalam produksi.