W3.CSS Gezinme Çubukları
Dikey:
Yatay:
W3.CSS Gezinme Çubuğu Sınıfları
W3.CSS, gezinme çubukları için aşağıdaki sınıfları sağlar:
| Sınıf | tanımlar |
|---|---|
| w3 çubuğu | HTML öğeleri için yatay kapsayıcı |
| w3-bar-blok | HTML öğeleri için dikey kapsayıcı |
| w3-çubuk-öğesi | Konteyner çubuğu öğeleri |
| w3-kenar çubuğu | HTML öğeleri için dikey kenar çubuğu |
| w3-mobil | Herhangi bir çubuk öğesini mobil öncelikli duyarlı hale getirir |
| w3-açılır-açılır-hover | Hoverable açılır öğe |
| w3-açılır-tıklama | Tıklanabilir açılır öğe (fareyle üzerine gelmek yerine) |
Temel Navigasyon
w3-bar sınıfı , HTML öğelerini yatay olarak görüntülemek için bir kapsayıcıdır.
w3-bar-item sınıfı, kapsayıcı öğelerini tanımlar .
Gezinme çubukları oluşturmak için mükemmel bir araçtır:
Örnek
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Duyarlı Navigasyon
w3-mobile sınıfı, tüm çubuk öğelerini duyarlı hale getirir ( büyük ekranlarda yatay ve küçük ekranlarda dikey).
Orta ve büyük ekranlar:
Küçük ekranlar:
Örnek
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
Renkli Gezinti Çubukları
Gezinme çubuğuna bir renk eklemek için bir w3-color sınıfı kullanın:
Örnek
<div class="w3-bar w3-light-grey">
<div
class="w3-bar w3-green">
<div
class="w3-bar w3-blue">
Kenarlı Gezinme Çubukları
Gezinme çubuğunun çevresine kenarlıklar eklemek veya bir kart olarak görüntülemek için bir w3-border veya w3-card sınıfını kullanın:
Örnek
<div class="w3-bar w3-border w3-light-grey">
<div
class="w3-bar w3-border w3-card-4">
Aktif/Mevcut Bağlantı
Vurgulamak için bir bağlantıya bir w3-color sınıfı ekleyin :
Örnek
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-green">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Gezilebilir Bağlantılar
Fareyi bir düğmenin üzerine getirdiğinizde arka plan rengi griye döner.
Fareyle üzerine gelindiğinde farklı bir arka plan rengi istiyorsanız, w3- hover- color sınıflarından herhangi birini kullanın:
Örnek
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-teal">Link 3</a>
</div>
Bunun yerine metin rengini değiştirmek istiyorsanız, w3-hover-none sınıfıyla varsayılan vurgulu efektini kapatın ve bir w3-hover-text sınıfı ekleyin.
Örnek
<div class="w3-bar w3-border w3-black">
<a href="#"
class="w3-bar-item w3-button">Default</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-hover-none w3-text-grey w3-hover-text-white">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 3</a>
</div>
Farklı vurgulu efektlerle oynamak için biraz zaman ayırın:
Örnek
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 3</a>
</div>
Sağa Hizalanmış Bağlantılar
Belirli bir bağlantıyı sağa hizalamak için bir liste öğesinde w3-right sınıfını kullanın :
Örnek
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-green w3-right">Link 3</a>
</div>
Gezinti Çubuğu Boyutu
Gezinme çubuğu içindeki bağlantıların yazı tipi boyutunu değiştirmek için w3 boyutunda bir sınıf kullanın :
Örnek
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">
Gezinme çubuğu içindeki her bağlantının dolgusunu değiştirmek için bir w3-padding sınıfı kullanın:
Örnek
<div class="w3-bar w3-border w3-green">
<a href="#" class="w3-bar-item w3-button w3-padding-16">Home</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 3</a>
</div>
Not: Gezinme çubuğuna her düğme yerine dolgu da ekleyebilirsiniz. Ancak, bunu yaparsanız, bağlantıların üzerine gelindiğinde tam dolgu almadığını unutmayın:
Örnek
<div class="w3-bar w3-green w3-padding-16"></div>
CSS genişlik özelliğiyle bağlantıların genişliğini özelleştirin
( Not : Küçük ekranlarda bağlantıları %100 genişliğe dönüştürmek için w3-mobile kullanın):
Örnek
<div class="w3-bar w3-dark-grey">
<a href="#"
class="w3-bar-item w3-button w3-mobile w3-green" style="width:33%">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile"
style="width:33%">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-mobile" style="width:33%">Link 2</a>
</div>
Simgelerle Gezinme Çubuğu
Örnek
<div class="w3-bar w3-light-grey w3-border">
<a href="#"
class="w3-bar-item w3-button w3-green"><i class="fa fa-home"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-sign-in"></i></a>
</div>
Yukarıdaki örnekteki "fa fa" sınıfları "Font Awesome" simgelerini görüntüler.
W3.CSS Simgeleri bölümünde simgelerin nasıl görüntüleneceği hakkında daha fazla bilgi edinin .
Gezinti Çubuğu Metni
Gezinme çubuğunun içinde düğmeler yerine metin istiyorsanız, düğmelerle aynı dolguyu elde etmek için w3-bar-item sınıfını kullanın.
Örnek
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
<span
class="w3-bar-item">Text</span>
</div>
Girişler ve Düğmeler ile Gezinme Çubuğu
Örnek
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<input type="text" class="w3-bar-item w3-input" placeholder="Search..">
<a href="#" class="w3-bar-item w3-button w3-green">Go</a>
</div>
Açılır Menü ile Gezinme Çubuğu
Fareyi "Açılır" bağlantısının üzerine getirin:
Örnek
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
Tıklanabilir Açılır Menü
Fareyle üzerine gelmek yerine açılır bağlantıya tıklamayı tercih ediyorsanız w3-açılır-tıkla seçeneğini kullanın:
Örnek
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myFunction()">
Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div id="demo"
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
Yatay Açılır Menü
Açılır bağlantıların dikey yerine yatay olarak görüntülenmesini istiyorsanız, w3-bar-block sınıfını açılır kapsayıcıdan kaldırın:
Örnek
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
Duyarlı Açılır Menü ile Duyarlı Gezinme Çubuğu
Duyarlı açılır bağlantılara sahip duyarlı bir gezinme çubuğu oluşturmak için açılır kapsayıcı dahil tüm bağlantılarda w3-mobile sınıfını kullanın.
Efekti görmek için tarayıcı penceresini yeniden boyutlandırın:
Örnek
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button w3-mobile w3-green">Home</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 2</a>
<div
class="w3-dropdown-hover w3-mobile">
<button
class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
</div>
</div>
Fixed Navigation Bar
To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the bar and add the w3-top or w3-bottom class:
Fixed Top
<div class="w3-top">
<div class="w3-bar">
...
...
</div>
</div>
Fixed Bottom
<div class="w3-bottom">
<div class="w3-bar">
...
...
</div>
</div>
Vertical Navigation Bar
The w3-bar-block class is a container for displaying HTML elements vertically.
Example
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Collapsing the Navigation Bar
When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar.
In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack:
Example
Side Navigation
The w3-sidebar class creates a side navigation:
Go to the next chapter to learn more about the side navigation.