css-navigation

Gezinme Çubuğu
Kolay kullanımlı navigasyona sahip olmak, herhangi bir web sitesi için önemlidir.
CSS ile sıkıcı HTML menülerini iyi görünümlü gezinti çubuklarına dönüştürebilirsiniz.
Bir gezinme çubuğu, standart bir HTML'yi temel alır.
Gezinme çubuğu temelde bir bağlantı listesi olduğundan, <ul> ve <li> öğelerini kullanmanız mantıklıdır:
<ul>
<li><a href="anasayfa.php">Home</a></li>
<li><a href="yenisayfa.html">News</a></li>
<li><a href="iletişim">Contact</a></li>
<li><a href="cikiş">About</a></li>
</ul>
Şimdi madde işaretlerini ve kenar boşluklarını ve dolguyu listeden çıkaralım:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Örnek açıklanmıştır:
list-style-type: none;- Mermileri atıyor. Bir gezinme çubuğuna liste işaretçileri gerekmiyor
Set margin: 0;ve padding: 0; tarayıcı varsayılan ayarlarını kaldırmak için
NOT : Yukarıdaki örnekte yer alan kod, hem dikey hem de yatay gezinme çubuklarında kullanılan standart koddur.
Dikey gezinme çubuğu oluşturmak için, yukarıdaki kodun yanı sıra listenin içindeki <a> öğelerini de stilleyebilirsiniz:
li a {
display: block;
width: 60px;
}
Örnek açıklanmıştır:
display: block; - Linkleri blok eleman olarak göstermek tüm link alanını tıklanabilir (sadece metin olarak değil) ve genişliğini (ve isterseniz dolgu malzemesi, kenar boşluğu, yükseklik vb.) Belirtmemizi sağlar.
width: 60px;- Blok elemanları varsayılan olarak tam genişliği alıyor. 60 piksellik bir genişlik belirtmek istiyoruz
Ayrıca, <ul> genişliğini de ayarlayabilir ve <a> öğesinin genişliğini kaldırabilirsiniz, çünkü blok öğeleri olarak görüntülendiklerinde kullanılabilir olan tüm genişlikleri alacaktır. Bu, önceki örneğimizle aynı sonuca neden olacaktır:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}

Gri bir arka plan rengiyle temel bir dikey gezinme çubuğu oluşturun ve kullanıcı fareyi üzerlerinde hareket ettirdiğinde bağlantıların arka plan rengini değiştirin:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* mous ustundeyken renk değişimi */
li a:hover {
background-color: #555;
color: white;
}

Aktif / Geçerli Navigasyon Bağlantısı
Kullanıcının hangi sayfada olduğunu bilmesini sağlamak için geçerli bağlantıya "etkin" bir sınıf ekleyin:
.active {
background-color: #4CAF50;
color: white;
}

Merkezi Bağlantılar ve Sınır Ekleme
Bağlantıları ortalamak text-align:centeriçin <li> veya <a>'ye ekleyin .
Ekle border<ul> gezinme çubuğu etrafına kenarlık eklemek için özellik. Ayrıca, navbarın içinde sınırları da istiyorsanız border-bottom, sonuncusu hariç, tüm <li> öğelerine ekleyin :
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}

Tam boylu Sabit Dikey Navbar
Tam yükseklikte, "yapışkan" bir yan gezinme oluşturun:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Kaydırmak bile sadık kalır*/
overflow: auto; /* Sidenav çok fazla içeriğe sahipse kaydırmayı etkinleştirin */
}

Yatay Gezinme Çubuğu
Yatay gezinme çubuğu oluşturmanın iki yolu vardır. Kullanılması satır içi veya kayan liste öğeleri.
Yatay gezinme çubuğu oluşturmanın bir yolu, yukarıdaki "standart" kodun yanı sıra, <li> öğelerini satır içi olarak belirtmektir:
li {
display: inline;
}
Örnek açıklanmıştır:
display: inline;- Varsayılan olarak, <li> öğeleri blok öğelerdir. Burada, her liste öğesinin önündeki ve sonundaki satır sonlarını kaldırarak bir satırda görüntüleriz.

Kayan Liste Öğeleri
Yatay gezinme çubuğu oluşturmanın başka bir yolu, <li> öğelerini yüzdürmek ve gezinme bağlantıları için bir düzen belirtmektir:
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
Örnek açıklanmıştır:
float: left;
- yan yana kaydırmak için blok öğeleri almak için float kullanın
display: block;
- Linkleri blok eleman olarak göstermek tüm link alanını tıklanabilir (sadece metin olarak değil), ve eğer isterseniz dolgu malzemesi (ve yükseklik, genişlik, kenar boşlukları vb.) Belirtmemizi sağlar.
padding: 8px
- Blok elemanları mevcut genişliğin tamamını aldığından, yan yana kalamazlar. Bu nedenle, iyi görünmelerini sağlamak için bazı dolguları belirtin
background-color: #dddddd;
- Bir öğenin her birine gri arka plan rengi ekleyin
İpucu: Tam genişlikte bir arka plan rengi istiyorsanız, her bir <a> öğesi yerine arka plan rengini <ul> olarak ekleyin:
ul {
background-color: #dddddd;
}

Bağlantıları Sağa Bağla
Liste öğelerini sağa ( float:right;) kaydırarak bağlantıları sağa hizalayın :
ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

Sınır Bölücüler
border-rightBağlantı bölenleri oluşturmak için mülkü <li> 'ye ekleyin :
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}

Sabit Seyir çubuğu
Kullanıcı sayfayı kaydırdığında bile, gezinme çubuğunu sayfanın en üstünde veya altında tutun:
Sabit Top
ul {
position: fixed;
top: 0;
width: 100%;
}
Sabit Alt
ul {
position: fixed;
bottom: 0;
width: 100%;
}

Yapışkan Navbar
Kullanım position: sticky;yapışkan bir navbar oluşturmak için <li> için.
Yapışkan bir eleman, kaydırma konumuna bağlı olarak göreli ve sabit arasında geçiş yapar. Görünüm alanında belirli bir ofset konumu sağlanıncaya kadar göreceli olarak konumlandırılır - daha sonra yerinde "yapışır" (konum gibi: sabit).
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Not: Internet Explorer, Edge 15 ve önceki sürümleri yapışkan konumlandırmayı desteklemez. Safari, bir "webkit" öneki gerektirir (yukarıdaki örneğe bakın). Ayrıca en az birini belirtmelisiniz top, right, bottomveya leftyapışkan konumlandırma çalışması için.