Açılır Menü ve Popover Kalıpları

HTML Açılır Pencere API'si (Chrome 114+, geniş ölçüde desteklenir) bildirimsel gösterme/gizleme davranışı sağlar: hedefte popover özniteliği, tetikleyici düğmede popovertarget özniteliği. Dışarı tıklayarak kapatma ve Escape tuşu yönetimi dâhil temel açma/kapatma işlemleri için JavaScript gerekmez.

Açılır pencere öğelerini [popover] veya :popover-open ile hedefleyin. Arka planı karartmak için ::backdrop sözde öğesi kullanılabilir. Açılır pencereler de iletişim kutuları gibi üst katmanda görüntülenir; z-index yığınlama sorunları yaşanmaz.

CSS Bağlantı Konumlandırması (Chrome 125+), açılır pencereyi JavaScript olmadan tetikleyicisine göre konumlandırır: tetikleyicide anchor-name: --btn, açılır pencerede position-anchor: --btn kullanın; ardından tetikleyicinin altına hizalamak için top: anchor(bottom); left: anchor(left) ayarlayın.

Bağlantı Konumlandırması olmadan, konumlandırılmış bir üst sarmalayıcı kullanın: kapsayıcıda position: relative, açılır listede position: absolute; top: 100%; left: 0 kullanın. Bu yaklaşım tarayıcılar arasında çalışır; ancak tetikleyici ile açılır listenin konumlandırılmış bir kapsayıcıda kardeş öğeler olmasını gerektirir.

Açılır listeyi şu şekilde biçimlendirin: position: absolute; background: var(--color-surface); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--spacing-1) 0; min-width: 200px. Menü öğelerinde iç boşluk, üzerine gelme arka planı ve tam genişlikte görüntüleme kullanın.

Açılır pencerenin açılmasını @starting-style ile, display özelliği değişikliğini canlandırmak için de transition-behavior: allow-discrete ile canlandırın. Bu, açılır pencerenin açık veya kapalı durumuna bağlı yalnızca CSS ile giriş ve çıkış animasyonları oluşturmanızı sağlar.

Açılır listeler klavyeyi desteklemelidir: Ok tuşları menü öğeleri arasında gezinir, Enter/Boşluk odaklanılan öğeyi etkinleştirir, Escape menüyü kapatır ve odağı tetikleyiciye geri döndürür. Açılır Pencere API'si Escape işlemini otomatik olarak yönetir; ok tuşlarıyla gezinmek için JavaScript olay işleme gerekir.

Özel açılır liste (açılır pencere API'si kullanılmıyorsa): tetikleyiciye aria-haspopup="listbox" ve aria-expanded, listeye role="listbox", her öğeye role="option" ve aria-selected ekleyin. Ekran okuyucular genişletilmiş durumu ve öğe sayısını duyurur.

Tetikleyicisinin altına konumlandırılan bir açılır liste, görünüm alanının alt kısmında taşabilir. Bunu IntersectionObserver veya getBoundingClientRect ile algılayıp açılır listeyi tetikleyicinin üstüne çevirin. CSS Bağlantı Konumlandırması bunu position-try-fallbacks ile yönetir.

İç içe açılır listeler (alt menüler) karmaşıklık ekler. Alt menüleri üst öğelerinin sağına konumlandırın. Fare çapraz hareket ederken alt menülerin kapanmasını önlemek için fare dışına çıktığında gizlemeden önce bir gecikme ekleyin (CSS transition-delay veya JS zaman aşımı kullanarak).

Üzerine gelmeyle tetiklenen açılır listeler dokunmatik cihazlarda çalışmaz; dokunma cihazlarında üzerine gelme durumu yoktur. Her yerde tıklama/dokunma tetikleyicileri kullanın. Dışarı dokunarak kapatma, Açılır Pencere API'sinin hafif kapatma özelliğiyle veya açık açılır listeleri kapatan bir belge tıklama dinleyicisiyle çalışır.

Açılır Pencere API'si, daha önce özel JavaScript gerektiren hangi işlemleri otomatik olarak sağlar?

Açılır Pencere API'si ve CSS Bağlantı Konumlandırması birlikte, bildirimsel ve JavaScript'i en aza indiren açılır liste ve açılır pencere desenleri sağlar. Daha geniş tarayıcı desteği için konumlandırılmış kapsayıcı desenleri güvenilir biçimde çalışır. Klavye erişilebilirliği, ARIA öznitelikleri, görünüm alanı çakışmalarının yönetimi ve dokunmatik cihaz desteği, üretime hazır açılır liste bileşenlerini tamamlar.