Özet - Açılır panel

CSS kursu · Uzman · Ders 42/53

Anchor positioning ile açılır panel kurarsın.

Özet - Açılır panel

Bu derste dört parçayı birleştirip bir açılır panel kuracağız: anchor-name ile düğmeyi çapa yapma, position-anchor ile paneli bağlama, anchor() ile konumlandırma ve position-try ile çakışmada yukarı açma.

Sıra sende: önce düğme tanımını, sonra panel tanımını yazacaksın. İki kod adımı birbirini izler; ikisi bitince panel hem aşağı hem yukarı doğru açılır.

Panel planı

Panelin iki parçası vardır. Düğme (.menu-button) anchor-name: --menu-button bildirisiyle çapa olur. Panel (.menu-panel) ise position: absolute, position-anchor: --menu-button, top: anchor(bottom) ve position-try: --flip-above bildirilerini taşır.

Bu dört bildiri birlikte: paneli düğmenin altına koyar, çakışmada yukarı çevirir. Tek satır JavaScript yok.

Uygulama Düğmeyi çapa yap

Bir .menu-button seçicisi yaz. Blokta anchor-name: --menu-button bildirisi olsun. Düğme böylece çapa olur.

Örnek çözümü göster

/* düğmeyi çapa yap */
.menu-button {
  anchor-name: --menu-button;
}

Uygulama Paneli konumla ve yedekle

Bir .menu-panel seçicisi yaz. Blokta position: absolute, position-anchor: --menu-button, top: anchor(bottom) ve position-try: --flip-above bildirileri olsun.

Örnek çözümü göster

/* paneli çapaya bağla ve konumla */
.menu-panel {
  position: absolute;
  position-anchor: --menu-button;
  top: anchor(bottom);
  position-try: --flip-above;
}

Kendini test et

Özellikleri rolüne eşle

anchor-name

Çapa adı verir
position-anchor

Çapaya bağlar
anchor()

Çapaya göre konumlar
position-try

Yedek konum dener

Uzman bölümündeki tüm dersler

Özet - Açılır panel