Demo: Navigasyon Barlar
Navigasyon Barlar
kolay kullanımlı navigasyon sahip herhangi bir web sitesi için önemlidir.
CSS ile iyi görünümlü gezinti çubukları içine sıkıcı HTML menüleri dönüştürebilir.
Gezinme Çubuğu = Bağlantı Listesi
Gezinti çubuğu bir üs olarak standart HTML ihtiyacı vardır.
Bizim örneklerde biz standart bir HTML listeden gezinti çubuğu inşa edecek.
Gezinti çubuğu yüzden kullanarak, temelde bağlantıların bir listesi <ul> ve <li> elementler mükemmel mantıklı:
Örnek
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Kendin dene " Şimdi listeden mermi ve marjları ve dolgu kaldırmak alalım:
Örnek açıklanmıştır:
-
list-style-type: none;- mermileri kaldırır. Gezinti çubuğu listesi işaretlerini ihtiyacı yoktur - Ayar
margin: 0;vepadding: 0;tarayıcı varsayılan ayarlarını kaldırmak için
Örneğin kod üzerinde hem dikey ve yatay gezinme çubukları kullanılan standart bir koddur.
Dikey Gezinme Çubuğu
Dikey gezinti çubuğu oluşturmak için, stil ekleyebilirsiniz <a> Yukarıdaki kodda ek olarak listede içine öğeler:
Örnek açıklanmıştır:
-
display: block;- Blok elemanlar olarak bağlantıları gösteriliyor bütün bağlantı alanını tıklanabilir hale getirir (not just the text) , ve bizi belirlemenizi sağlar width (and padding, margin, height , etc. if you want) -
width: 60px;- Blok elemanları varsayılan olarak kullanılabilir tam genişliği kadar sürebilir. Biz 60 piksel genişlik belirtmek istediğiniz
Ayrıca genişliğini ayarlayabilirsiniz <ul> ve genişliğini kaldırmak <a> blok elemanı olarak görüntülenir zaman mevcut tam genişliği kadar götürecektir. Bu bizim önceki örnekte olduğu gibi aynı sonucu üretecektir:
Örnek
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
} Kendin dene " Dikey Gezinme Çubuğu Örnekleri
gri arka plan rengiyle temel dikey navigasyon çubuğu oluşturma ve kullanıcı fareyi üzerinde hareket ettirdiğinde bağlantıların arka plan rengini değiştirmek:
Örnek
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px
0 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
} Kendin dene " Aktif / Akım Navigasyon Bağlantı
Bir ekleme "active" kullanıcı o / o hangi sayfada olduğunu bildirmek için geçerli bağlantıya sınıfı:
Merkezi Linkler & ekle Sınırlar
Ekle text-align:center için <li> ya <a> bağlantıları merkezi.
Ekle border mülkü <ul> gezinme çubuğu etrafına bir çerçeve ekleyin. Ayrıca gezinme çubuğu içine sınırları istiyorsanız, bir ekleme border-bottom herkese <li> sonuncusu hariç, elemanların:
Örnek
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
} Kendin dene " Tam boy Dikey Navbar'ı Sabit
, Tam yüksekliğini oluştur "sticky" yan navigasyonu:
Örnek
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
} Kendin dene " Not: Bu örnek, mobil cihazlarda düzgün çalışmayabilir.
Yatay Gezinme Çubuğu
Yatay gezinme çubuğu oluşturmak için iki yol vardır. Kullanılması inline veya floating liste öğeleri.
Satır içi Liste Öğeleri
Yatay gezinme çubuğu oluşturmanın bir yolu belirtmektir <li> ilaveten, satır içi gibi öğeleri "standard" Yukarıdaki kodu:
Örnek açıklanmıştır:
-
display: inline;- Standart olarak, <li> elemanlar blok unsurlardır. Burada, hat önce sonları çıkarmak her liste öğesinin sonra, bir satırda bunları görüntülemek için
Liste Ürünleri Yüzer
Yatay gezinme çubuğu oluşturarak bir başka yolu yüzer etmektir <li> öğeleri ve gezinme bağlantılarının için bir düzen belirleyin:
Örnek
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
} Kendin dene " Örnek açıklanmıştır:
-
float: left;- Kullanım şamandıra yan yana kaymaya blok elemanlarını almak için -
display: block;- Blok elemanlar olarak bağlantıları gösteriliyor bütün bağlantı alanını tıklanabilir hale getirir (not just the text) ve (ve bize dolgu belirlemenizi sağlar height, width, margins isterseniz vb) -
padding: 8px;- Blok elemanları mevcut tam genişliğini kullanmasını olduklarından, yanyana yüzer olamaz. Bu nedenle, onları iyi görünmesi için bazı dolgu belirtmek -
background-color: #dddddd;- Her bir elemana gri arkaplan-renk ekleme
İpucu: background-renk ekleyin etmek <ul> yerine her birinin <a> bir tam genişlikli arka plan rengi istiyorsanız elemanı:
Yatay Gezinme Çubuğu Örnekleri
Karanlık bir arka plan rengiyle temel yatay gezinme çubuğu oluşturma ve kullanıcı fareyi üzerinde hareket ettirdiğinde bağlantıların arka plan rengini değiştirmek:
Örnek
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
} Kendin dene " Aktif / Akım Navigasyon Bağlantı
Bir ekleme "active" kullanıcı o / o hangi sayfada olduğunu bildirmek için geçerli bağlantıya sınıfı:
Sağ Hizala Linkler
Sağa liste öğelerini yüzen tarafından sağ-align bağlantılar ( float:right; ) :
Örnek
<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> Kendin dene " Sınır Bölücüler
Ekle border-right özelliğini <li> bağlantı bölücüler oluşturmak için:
Örnek
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
} Kendin dene " Sabit Gezinme Çubuğu
üstündeki gezinti çubuğu kalmak veya sayfanın alt, hatta kaydırdığı sayfam yap:
Not: Bu örnekler, mobil cihazlarda düzgün çalışmayabilir.
Gri Yatay Navbar'ı
İnce gri kenarlıklı gri yatay gezinme çubuğunda bir örnek:
Diğer Örnekler
duyarlı topnav
Nasıl bir tepki üst navigasyon oluşturmak için CSS3 medya sorgularını kullanmak.
duyarlı Sidenav
Nasıl bir tepki taraftaki navigasyonu oluşturmak için CSS3 medya sorgularını kullanmak.
Açılır Navbar'ı
Nasıl bir gezinme çubuğunun içindeki bir açılır menü ekleyin.