W3.CSS dostarczyć wszystkie rodzaje prętów nawigacji:
Pionowy:
Poziome (pionowe na małych ekranach):
Podstawowa nawigacja
Klasa w3-navbar tworzy poziomy pasek nawigacji:
Przykład
<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> Spróbuj sam " Bary Barwne nawigacyjne
Przykład
<ul class="w3-navbar w3-light-grey">
<ul
class="w3-navbar w3-green">
<ul
class="w3-navbar w3-blue"> Spróbuj sam " Bary ramką nawigacyjne
Przykład
<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"> Spróbuj sam " Aktywny / Aktualny link
Przykład
<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> Spróbuj sam " Hoverable Linki
Po najechaniu kursorem myszy na linki wewnątrz paska nawigacyjnego, kolor tła zmieni się na szary.
Jeśli chcesz inny kolor tła przy aktywowaniu, użyj jednej z klas kolorów W3-hover-, a jeśli chcesz inny kolor tekstu przy aktywowaniu, użyj jednej z klas w3-hover tekstu kolorystycznych:
Przykład
<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> Spróbuj sam " Wyrównany do prawej strony Linki
Przykład
<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> Spróbuj sam " Pasek nawigacji Rozmiar
Zmień rozmiar czcionki:
Przykład
<ul class="w3-navbar w3-green w3-large">
<ul class="w3-navbar w3-green
w3-xlarge"> Spróbuj sam " Zmień padding:
Przykład
<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> Spróbuj sam " Dostosuj szerokość elementów listy z właściwością szerokość CSS (uwaga: na mniejszych ekranach, będą przekształcać się w 100%):
Przykład
<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> Spróbuj sam " Pasek nawigacyjny z ikonami
Przykład
<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> Spróbuj sam " Pasek nawigacyjny z rozwijanej
Przesuń kursor myszy nad "rozwijane" link:
Przykład
<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> Spróbuj sam " Uwaga: Gdy menu rozwijane jest "otwarty", link rozwijana dostaje szary kolor tła, aby wskazać, że jest aktywny. Aby to zastąpić, dodać klasę koloru w3-hover- zarówno do "listy rozwijanej" <li> i <a>:
Wskazówka: Jeśli chcesz symbol rozwijaną obok tekstu rozwijanej, dodać odpowiednią ikonę (jak )
Przykład
<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> Spróbuj sam " Użyj w3-rozwijaną kliknij jeśli wolisz, aby kliknąć na link rozwijanej zamiast zawisu:
Przykład
<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> Spróbuj sam " Poprawiono Pasek nawigacyjny
Aby wymusić pasek nawigacyjny, aby utrzymać się na szczycie lub na dole strony, nawet wtedy, gdy użytkownik przewija strony, zawinąć <div> wokół przycisku <ul> i dodać W3-górny lub dolny w3-klasę:
Zwijanie pasku nawigacyjnym
Gdy pasek nawigacyjny zajmuje zbyt dużo miejsca na małym ekranie, a ty nie chcesz wyświetlić go w pionie domyślnie, można użyć klasy narzędzie do ukrycia i pokazać konkretne linki w pasku nawigacyjnym.
W poniższym przykładzie, pasek nawigacyjny jest zastąpiony przyciskiem (☰) w prawym górnym rogu, kiedy pokazano na tabletach i urządzeniach mobilnych. Po kliknięciu przycisku na pasku nawigacji pojawi się w pionie:
Przykład
Spróbuj sam "Topnav
Innym przykładem pasku nawigacyjnym jest klasa W3-topnav. Jest ona podobna do w3-paska nawigacyjnego, chyba, że będzie dodać podkreślenie po najechaniu linki, zamiast koloru tła:
Przykład
<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> Spróbuj sam " Przykład czcionką Niesamowite Ikony
<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> Spróbuj sam " Side Nawigacja
Klasa w3-sidenav tworzy pionowy pasek nawigacyjny:
Przejdź do następnego rozdziału , aby dowiedzieć się więcej na temat nawigacji po stronie.