gezinti çubukları için her türlü sağlamak W3.CSS:
Dikey:
Yatay (vertical on small screens) :
Temel Navigasyon
W3-navbar sınıfı yatay gezinme çubuğu oluşturur:
Örnek
<ul class="w3-navbar w3-black">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> Kendin dene " Renkli Navigasyon Barlar
Örnek
<ul class="w3-navbar w3-light-grey">
<ul
class="w3-navbar w3-green">
<ul
class="w3-navbar w3-blue"> Kendin dene " Bordürlü Navigasyon Barlar
Örnek
<ul class="w3-navbar w3-border w3-light-grey">
<ul
class="w3-navbar w3-border w3-round w3-light-grey">
<ul
class="w3-navbar w3-card-8 w3-light-grey"> Kendin dene " Aktif / Akım Bağlantı
Örnek
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-green" href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> Kendin dene " Hoverable Linkler
Ne zaman gezinme çubuğunda içindeki bağlantılarda fare, arka plan rengini gri olarak değişecektir.
Eğer fareyle üzerine farklı bir arka plan rengi istiyorsanız, w3-hover- renk sınıfların herhangi kullanın ve fareyle üzerine farklı metin rengi istiyorsanız, w3-vurgulu-metin-renk sınıfları herhangi birini kullanabilirsiniz:
Örnek
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-hover-red" href="#">Home</a></li>
<li><a class="w3-hover-blue" href="#">Link 1</a></li>
<li><a
class="w3-hover-green" href="#">Link 2</a></li>
<li><a class="w3-hover-teal" href="#">Link 3</a></li>
</ul> Kendin dene " Sağ Bağlantısızlar Linkler
Örnek
<ul class="w3-navbar w3-light-grey w3-border">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li
class="w3-right"><a class="w3-green" href="#">Link
3</a></li>
</ul> Kendin dene " Gezinme Çubuğu Boyutu
Yazı tipi boyutunu değiştirin:
Örnek
<ul class="w3-navbar w3-green w3-large">
<ul class="w3-navbar w3-green
w3-xlarge"> Kendin dene " dolgu değiştirin:
Örnek
<ul class="w3-navbar w3-green">
<li><a class="w3-padding-hor-16" href="#">Home</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 1</a></li>
<li><a
class="w3-padding-hor-16" href="#">Link 2</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 3</a></li>
</ul> Kendin dene " CSS genişliği özelliği (: küçük ekranlarında,% 100'e dönüşümü Not) ile liste öğeleri genişliğini özelleştir:
Örnek
<ul class="w3-navbar w3-dark-grey w3-center">
<li
style="width:50%"><a class="w3-padding w3-green" href="#">Home</a></li>
<li style="width:50%"><a class="w3-padding" href="#">Link 1</a></li>
</ul> Kendin dene " Simgeler ile Gezinme Çubuğu
Örnek
<ul class="w3-navbar w3-light-grey w3-border
w3-large">
<li><a
class="w3-green" href="#"><i class="fa fa-home w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-search w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-envelope w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-globe w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-sign-in w3-large"></i></a></li>
</ul> Kendin dene " Dropdown ile Gezinme Çubuğu
Üzerinde fareyi hareket ettirin "Dropdown" link:
Örnek
<ul class="w3-navbar w3-card-2 w3-light-grey">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li class="w3-dropdown-hover">
<a href="#">Dropdown</a>
<div
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul> Kendin dene " Not: açılır menü olduğunda "open" , açılan bağlantı aktif olduğunu göstermek için gri arka plan rengini alır. Bu geçersiz kılmak için, hem bir w3-hover- renk sınıfını eklemek "dropdown" <li> ve <a> :
İpucu: Eğer açılan metninin yanında bir açılır sembolü istiyorsanız, uygun bir simge eklemek (like ) (like ) (like ) :
Örnek
<li class="w3-dropdown-hover
w3-hover-orange">
<a class="w3-hover-orange" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li> Kendin dene " W3-açılan tıklama kullanın yerine üzerine gelindikten açılan linke tıklayın isterseniz:
Örnek
<li class="w3-dropdown-click">
<a onclick="myFunction()" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div id="demo"
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li> Kendin dene " Sabit Gezinme Çubuğu
Kaydırdığı sayfa, bir sarın bile üstünde veya sayfanın altındaki kalmak gezinme çubuğunu zorlamak için <div> etrafında öğesi <ul> ve w3-üst veya w3-alt sınıf ekleyin:
Navigasyon Bar Çöken
gezinti çubuğu küçük bir ekranda çok fazla yer alır ve varsayılan olarak dikey görüntülemek istemiyorsanız zaman, gizlemek ve gezinme çubuğunda belirli bağlantıları göstermek için yarar sınıflarını kullanabilirsiniz.
Aşağıdaki örnekte, navigasyon çubuğu bir düğme ile değiştirilir (☰) tabletler ve mobil cihazlarda gösterildiğinde sağ üst köşedeki. düğmesine tıklandığında, gezinti çubuğu dikey görüntülenir:
Örnek
Kendin dene "topnav
Bir gezinme çubuğunun diğer bir örneği, W3-topnav sınıftır. Bunun yerine bir arka plan renginin bağlantılar üzerine geldiğinizde bir alt çizgi katacak dışında w3-Menü ye benzer:
Örnek
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Kendin dene " Yazı Müthiş Simgeler ile Örnek
<nav class="w3-topnav w3-green">
<a href="#"><i class="fa
fa-home"></i></a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Kendin dene " Yan Navigasyon
W3-sidenav sınıf dikey bir gezinme çubuğu oluşturur:
Git sonraki bölümde yan gezinme hakkında daha fazla bilgi edinmek.