W3.Paski nawigacyjne CSS
Pionowy:
Poziomy:
W3.CSS Klasy paska nawigacyjnego
W3.CSS udostępnia następujące klasy dla pasków nawigacyjnych:
| Klasa | Definiuje |
|---|---|
| w3-bar | Poziomy kontener na elementy HTML |
| w3-bar-blok | Pionowy kontener na elementy HTML |
| w3-bar-element | Elementy barowe kontenera |
| w3 pasek boczny | Pionowy pasek boczny dla elementów HTML |
| w3-mobilny | Sprawia, że każdy element paska jest responsywny w wersji mobilnej |
| w3-menu rozwijane | Unoszący się element rozwijany |
| w3-menu-kliknij | Klikalny element rozwijany (zamiast najechania) |
Podstawowa nawigacja
Klasa w3-bar jest kontenerem do wyświetlania elementów HTML w poziomie.
Klasa w3-bar-item definiuje elementy kontenera.
Jest to idealne narzędzie do tworzenia pasków nawigacyjnych:
Przykład
<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>
Responsywna nawigacja
Klasa w3-mobile sprawia, że wszystkie elementy paska są responsywne (poziome na dużych ekranach i pionowe na małych).
Średnie i duże ekrany:
Małe ekrany:
Przykład
<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>
Kolorowe paski nawigacyjne
Użyj klasy w3-color , aby dodać kolor do paska nawigacyjnego:
Przykład
<div class="w3-bar w3-light-grey">
<div
class="w3-bar w3-green">
<div
class="w3-bar w3-blue">
Obramowane paski nawigacyjne
Użyj klasy w3-border lub w3-card , aby dodać ramki wokół paska nawigacyjnego lub wyświetlić go jako kartę:
Przykład
<div class="w3-bar w3-border w3-light-grey">
<div
class="w3-bar w3-border w3-card-4">
Aktywne/bieżące łącze
Dodaj klasę w3-color do linku, aby go wyróżnić:
Przykład
<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>
Hoverable Linki
Gdy najedziesz myszą na przycisk, kolor tła zmieni się na szary.
Jeśli chcesz mieć inny kolor tła po najechaniu myszą, użyj dowolnej z klas w3-hover- color :
Przykład
<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>
Jeśli zamiast tego chcesz zmienić kolor tekstu, wyłącz domyślny efekt najechania za pomocą klasy w3-hover-none i dodaj klasę w3-hover-text .
Przykład
<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>
Poświęć trochę czasu na zabawę z różnymi efektami najechania:
Przykład
<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>
Łącza wyrównane do prawej
Użyj klasy w3-right na elemencie listy, aby wyrównać do prawej określony link:
Przykład
<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>
Rozmiar paska nawigacyjnego
Użyj klasy w3, aby zmienić rozmiar czcionki linków na pasku nawigacyjnym:
Przykład
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">
Użyj klasy w3 padding , aby zmienić wypełnienie każdego łącza w pasku nawigacyjnym:
Przykład
<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>
Uwaga: możesz również dodać dopełnienie do paska nawigacyjnego zamiast każdego przycisku. Jeśli jednak to zrobisz, zwróć uwagę, że linki nie otrzymują pełnego wypełnienia po najechaniu myszą:
Przykład
<div class="w3-bar w3-green w3-padding-16"></div>
Dostosuj szerokość linków za pomocą właściwości szerokości CSS
( Uwaga : użyj w3-mobile , aby przekształcić linki do 100% szerokości na małych ekranach):
Przykład
<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>
Pasek nawigacyjny z ikonami
Przykład
<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>
Klasy „fa fa” w powyższym przykładzie wyświetlają ikony „Font Awesome”.
Dowiedz się więcej o wyświetlaniu ikon w rozdziale Ikony W3.CSS .
Tekst paska nawigacyjnego
Jeśli chcesz, aby tekst zamiast przycisków znajdował się na pasku nawigacyjnym, użyj klasy w3-bar-item , aby uzyskać takie samo wypełnienie jak przyciski.
Przykład
<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>
Pasek nawigacyjny z wejściami i przyciskami
Przykład
<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>
Pasek nawigacyjny z rozwijanym menu
Najedź myszą na link „Rozwijane”:
Przykład
<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>
Klikalne menu rozwijane
Użyj w3-dropdown-click , jeśli wolisz kliknąć link rozwijany zamiast najeżdżać:
Przykład
<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>
Poziome menu rozwijane
Usuń klasę w3-bar-block z kontenera rozwijanego, jeśli chcesz, aby linki rozwijane były wyświetlane w poziomie zamiast w pionie:
Przykład
<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>
Responsywny pasek nawigacyjny z responsywnym menu rozwijanym
Użyj klasy w3-mobile na wszystkich linkach, w tym w kontenerze rozwijanym, aby utworzyć responsywny pasek nawigacyjny z responsywnymi linkami rozwijanymi.
Zmień rozmiar okna przeglądarki, aby zobaczyć efekt:
Przykład
<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.