Meydan okuma - Duyarlı navbar

Mobil öncelikli duyarlı bir navbar kurarsın.

Mobil öncelikli navbar

Bir navbar mobil cihazda dikey, masaüstünde yatay açılır. Mobil öncelikli yaklaşımda önce küçük ekran yazılır: menü flex-direction: column ile dikey dizilir, gereksiz bağlantılar display: none ile gizlenir.

Sonra @media (min-width: 768px) ile geniş ekran bildirimleri eklenir: flex-direction: row ile yatay, gizli bağlantılar display: block ile geri açılır. Mobil önce yazılan kod, daraltma sırasında kırılmaz; masaüstüne eklemektir, çıkarmak değil.

Uygulama Duyarlı navbar kur

Aşağıdaki CSS'i tamamla. .menu mobilde dikey dizilsin ve .extra bağlantısı gizlensin. 768px ve üzeri için .menu yatay, .extra görünür olsun.

Örnek çözümü göster

/* menü - mobil önce */
.menu {
  flex-direction: column;
}

/* ekstra bağlantı - mobil önce */
.extra {
  display: none;
}

/* geniş ekran */
@media (min-width: 768px) {
  .menu {
    flex-direction: row;
  }
  .extra {
    display: block;
  }
}

Kendini test et

Masaüstü yönünü yaz

@media (min-width: 768px) {
  .menu {
    flex-direction: ____;
  }
}

Cevabı göster

@media (min-width: 768px) {
  .menu {
    flex-direction: row;
  }
}

Mobil öncelikli yaklaşımda hangi medya sorgusu kullanılır?
```
/* mobil önce */
.menu { flex-direction: column; }

/* geniş ekran */
@media (...) {
  .menu { flex-direction: row; }
}
```
- @media (max-width: 768px)
- @media (orientation: landscape)
- @media (min-width: 768px)
- @media (hover: none)
Cevabı göster

@media (min-width: 768px) — Doğru. min-width: 768px, 768px ve üzeri için bildirimleri uygular; mobil öncelikli yaklaşıma uyar.
Navbar özelliğini rolüyle eşleştir

flex-direction: column

Mobilde menüyü dikey dizer
flex-direction: row

Masaüstünde yatay dizer
display: none

Bağlantıyı gizler
display: block

Gizli bağlantıyı geri açar
@media (min-width: 768px)

Geniş ekran bildirimlerini başlatır

Sıradaki ders: Meydan okuma - Form ve tablo

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler