W3.CSS alle Arten für Navigationsleisten bieten:
Vertikal:
Horizontal (vertikal auf kleinen Bildschirmen):
Grundsätzliches zur Navigation
Die w3-navbar Klasse erstellt eine horizontale Navigationsleiste:
Beispiel
<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> Versuch es selber " Farbige Navigationsleisten
Beispiel
<ul class="w3-navbar w3-light-grey">
<ul
class="w3-navbar w3-green">
<ul
class="w3-navbar w3-blue"> Versuch es selber " Angrenzende Navigationsleisten
Beispiel
<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"> Versuch es selber " Aktiv / aktuelle Link
Beispiel
<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> Versuch es selber " Hoverable Verbindungen
Wenn Sie die Maus über die Links in der Navigationsleiste, wird die Hintergrundfarbe zu grau ändern.
Wenn Sie eine andere Hintergrundfarbe auf schweben wollen, verwenden Sie einen der w3-hover- Farbklassen, und wenn Sie eine andere Textfarbe auf schweben wollen, verwenden Sie einen der w3-Hover-Text-Farbklassen:
Beispiel
<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> Versuch es selber " Rechtsbündig Verbindungen
Beispiel
<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> Versuch es selber " Navigationsleiste Größe
Ändern der Schriftgröße:
Beispiel
<ul class="w3-navbar w3-green w3-large">
<ul class="w3-navbar w3-green
w3-xlarge"> Versuch es selber " Ändern Sie die padding:
Beispiel
<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> Versuch es selber " Passen Sie die Breite der Listenelemente mit der CSS - Eigenschaft width (Anmerkung: auf kleineren Bildschirmen, werden sie zu 100% Transformation):
Beispiel
<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> Versuch es selber " Navigationsleiste mit Icons
Beispiel
<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> Versuch es selber " Navigationsleiste mit Dropdown
Bewegen Sie die Maus über das "Dropdown" link:
Beispiel
<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> Versuch es selber " Hinweis: Wenn das Dropdown - Menü "offen" ist, das Drop - Down - Link einen grauen Hintergrundfarbe wird , um anzuzeigen , dass er aktiv ist. So überschreiben Sie diese, fügen Sie ein w3-hover- Farbklasse sowohl für die "Dropdown" <li> und <a>:
Tipp: Wenn Sie ein Dropdown - Symbol neben dem Drop - Down - Text möchten, fügen Sie ein passendes Symbol (wie ):
Beispiel
<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> Versuch es selber " Verwenden Sie w3-Drop - Down-klicken , wenn Sie es vorziehen , auf den Dropdown - Link , statt schweben zu klicken:
Beispiel
<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> Versuch es selber " Feste Navigationsleiste
Um die Navigationsleiste erzwingen am oberen oder am unteren Rand der Seite zu bleiben, auch wenn der Benutzer scrollt die Seite, wickeln Sie ein <div> Element um das <ul> und fügen Sie den w3-top oder w3-bottom - Klasse:
Einstürzen die Navigationsleiste
Wenn die Navigationsleiste auf einem kleinen Bildschirm zu viel Platz in Anspruch nimmt, und Sie wollen es nicht standardmäßig vertikal angezeigt werden, können Sie Utility-Klassen verwenden zu verstecken und spezifische Links in der Navigationsleiste angezeigt.
Im Beispiel unten wird die Navigationsleiste mit einem Knopf (☰) in der oberen rechten Ecke ersetzt, wenn auf Tablets und mobile Geräte gezeigt. Wenn die Schaltfläche geklickt wird, wird die Navigationsleiste vertikal angezeigt werden:
Beispiel
Versuch es selber "Topnav
Ein weiteres Beispiel einer Navigationsleiste ist die w3-topnav Klasse. Es ist ähnlich wie w3-navbar, mit der Ausnahme , dass es einen Unterstrich hinzufügen , wenn Sie über die Links schweben, statt einer Hintergrundfarbe:
Beispiel
<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> Versuch es selber " Beispiel mit Font Super Icons
<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> Versuch es selber " Side Navigation
Die w3-sidenav Klasse erstellt eine vertikale Navigationsleiste:
Gehen Sie auf die nächsten Kapitel mehr über die Seite Navigation zu lernen.