CSS Yatay Gezinti Çubuğu

Yatay gezintili menü

Yatay gezintili menü oluşturmak için iki yöntem vardır: kullanarakSatır içiveyaKaydırmaListe öğeleri.

Satır içi liste öğeleri

Yatay gezintili menü oluşturmanın bir yolu, <li> elementlerini inline olarak belirlemektir, yukarıdaki 'standart' kodun yanı sıra:

Örnek

li {
  display: inline;
}

Kişisel Olarak Deneyin

Örnek açıklaması:

display: inline; -Varsayılan olarak, <li> elementleri blok elementleridir. Burada, her liste öğesi öncesinde ve sonrasında bulunan satır atlamalarını kaldırarak, hepsinin bir satırda görüntülenmesini sağlarız.

Kaydırılmış liste öğeleri

Yatay gezintili menü oluşturmanın başka bir yolu, <li> elementlerini kaydırarak ve navigasyon bağlantılarına düzen belirlemektir:

Örnek

li {
  float: sol;
}
a {
  display: blok;
  padding: 8px;
  background-color: #dddddd;
}

Kişisel Olarak Deneyin

Örnek açıklaması:

  • float: sol; - Float kullanarak blok elementlerini birbirine yaklaştırabiliriz
  • display: blok; - Bağlantıları blok elementleri olarak göstererek tüm bağlantı alanını tıklanabilir hale getirebiliriz (sadece metin değil), ayrıca doldurma (ihtiyaç duyulursa, yükseklik, genişlik, marj vb.) belirlememizi sağlar
  • padding: 8px; - Blok elementlerini daha güzel hale getirin
  • background-color: #dddddd; - Her elemente gri arka plan rengi ekleyin

İpucu:Tam genişlikte arka plan rengi için, background-color'ı <ul> etiketine ekleyin, değilse her <a> elementine:

Örnek

ul {
  background-color: #dddddd;
}

Kişisel Olarak Deneyin

Yatay gezintili menü örneği

Koyu arka plan rengi olan temel düzey yatay gezintili menü oluşturun ve kullanıcı fareyi bağlantı üzerine taşıdığında bağlantı arka plan rengini değiştirin:

Örnek

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: gizli;
  background-color: #333;
}
li {
  float: sol;
}
li a {
  display: blok;
  color: beyaz;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Fare üstüne gelindiğinde bağlantı rengini #111 (siyah) olarak değiştir */
li a:hover {
  background-color: #111;
}

Kişisel Olarak Deneyin

Aktif/Geçerli navigasyon bağlantısı

Geçerli bağlantıya 'active' sınıfı ekleyin, böylece kullanıcı hangi sayfada olduğunu bilir:

Örnek

.active {
  background-color: #4CAF50;
}

Kişisel Olarak Deneyin

Sağa hizalanan bağlantılar

Liste öğelerini sağa kaydırarak bağlantıları sağa hizalayın (float:right;）：

Örnek

<ul>
  <li><a href="#home">Ana Sayfa</a></li>
  <li><a href="#news">Haberler</a></li>
  <li><a href="#contact">İletişim</a></li>
  <li style="float:right"><a class="active" href="#about">Hakkında</a></li>
</ul>

Kişisel Olarak Deneyin

separasyon çubuğu

çerçeve öznitelik ekleyin <li> ile bağlantı ayraçları oluşturun: border-right

Örnek

/* Tüm liste öğelerine gri sağ çerçeve ekleyin, son öğe (last-child) hariç */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

Kişisel Olarak Deneyin

Sabit navigasyon çubuğu

Navigasyon çubuğunu, kullanıcı sayfayı kaydırırken de sayfanın üstünde veya altında tutar:

Üstte sabit

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

Kişisel Olarak Deneyin

Altta sabit

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Kişisel Olarak Deneyin

Dikkat:移动设备上的固定定位可能无法正常工作。

Gri yatay navigasyon çubuğu

Ince gri çerçeve ile gri yatay navigasyon çubuğunun örneği

Örnek

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

Kişisel Olarak Deneyin

Yapışkan navigasyon çubuğu

<ul> e ekleyin position: sticky;ile yapışkan navigasyon çubuğu oluşturun.

Yapışkan elementler, kaydırma konumuna göre göreli ve sabit arasında geçiş yapar. Gözde, belirli bir kaydırma konumuna ulaşana kadar göreli konumlandırılmıştır - ardından uygun konuma 'yapıştırılır' (örneğin, position:fixed).

Örnek

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Kişisel Olarak Deneyin

Dikkat:Internet Explorer, Edge 15 ve Daha Düşük Sürümler Sabit Konumun Desteklenmemektedir. Safari, -webkit- öneki gerektirir (yukarıdaki örneğe bakın). Ayrıca belirtmeniz gereken üstvesağvealt veya sol Sabit Konumun Etkili Olması İçin En Az Bir Tanesi.

Daha Fazla Örnek

Duyarlı Üst Navigasyon Çubuğu
CSS Medya Sorgularını Kullanarak Duyarlı Üst Navigasyon Oluşturma Nasıl Yapılır.
Duyarlı Kenar Navigasyon Çubuğu
CSS Medya Sorgularını Kullanarak Duyarlı Kenar Navigasyonu Oluşturma Nasıl Yapılır.
Açılır Menü Navigasyon Çubuğu
Navigasyon Çubuğuna Açılır Menü Ekleme Nasıl Yapılır.