W3.CSS Navigationsleisten
Vertikal:
Horizontal:
W3.CSS Navigationsleistenklassen
W3.CSS bietet die folgenden Klassen für Navigationsleisten:
| Klasse | Definiert |
|---|---|
| w3-bar | Horizontaler Container für HTML-Elemente |
| w3-Bar-Block | Vertikaler Container für HTML-Elemente |
| w3-bar-item | Container-Bar-Elemente |
| w3-Seitenleiste | Vertikale Seitenleiste für HTML-Elemente |
| w3-mobil | Macht jedes Bar-Element mobil-first-responsive |
| w3-Dropdown-Hover | Hoverbares Dropdown-Element |
| w3-Dropdown-Klick | Anklickbares Dropdown-Element (statt Hover) |
Grundlegende Navigation
Die w3-bar- Klasse ist ein Container zum horizontalen Anzeigen von HTML-Elementen.
Die Klasse w3-bar-item definiert die Containerelemente.
Es ist ein perfektes Werkzeug zum Erstellen von Navigationsleisten:
Beispiel
<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>
Responsive Navigation
Die w3-mobile- Klasse macht alle Balkenelemente responsiv (horizontal auf großen Bildschirmen und vertikal auf kleinen).
Mittlere und große Bildschirme:
Kleine Bildschirme:
Beispiel
<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>
Farbige Navigationsleisten
Verwenden Sie eine w3-color- Klasse, um der Navigationsleiste eine Farbe hinzuzufügen:
Beispiel
<div class="w3-bar w3-light-grey">
<div
class="w3-bar w3-green">
<div
class="w3-bar w3-blue">
Umrandete Navigationsleisten
Verwenden Sie eine w3-border- oder w3-card- Klasse, um Rahmen um die Navigationsleiste hinzuzufügen oder sie als Karte anzuzeigen:
Beispiel
<div class="w3-bar w3-border w3-light-grey">
<div
class="w3-bar w3-border w3-card-4">
Aktiver/Aktueller Link
Fügen Sie einem Link eine w3-color- Klasse hinzu, um ihn hervorzuheben:
Beispiel
<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>
Hoverbare Links
Wenn Sie mit der Maus über eine Schaltfläche fahren, ändert sich die Hintergrundfarbe in Grau.
Wenn Sie beim Hover eine andere Hintergrundfarbe wünschen, verwenden Sie eine der w3-hover- color - Klassen:
Beispiel
<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>
Wenn Sie stattdessen die Textfarbe ändern möchten, deaktivieren Sie den standardmäßigen Hover-Effekt mit der Klasse w3-hover-none und fügen Sie eine Klasse w3-hover-text hinzu .
Beispiel
<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>
Nehmen Sie sich etwas Zeit, um mit verschiedenen Hover-Effekten herumzuspielen:
Beispiel
<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>
Rechtsbündige Links
Verwenden Sie die w3-right- Klasse für ein Listenelement, um einen bestimmten Link rechtsbündig auszurichten:
Beispiel
<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>
Größe der Navigationsleiste
Verwenden Sie eine w3-Size- Klasse, um die Schriftgröße der Links in der Navigationsleiste zu ändern:
Beispiel
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">
Verwenden Sie eine w3-Padding- Klasse, um die Auffüllung jedes Links in der Navigationsleiste zu ändern:
Beispiel
<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>
Hinweis: Sie können der Navigationsleiste auch statt jeder Schaltfläche eine Auffüllung hinzufügen. Wenn Sie dies tun, beachten Sie jedoch, dass die Links beim Hover nicht vollständig aufgefüllt werden:
Beispiel
<div class="w3-bar w3-green w3-padding-16"></div>
Passen Sie die Breite der Links mit der CSS-Eigenschaft width an
( Hinweis : Verwenden Sie w3-mobile , um die Links auf kleinen Bildschirmen auf 100 % Breite umzuwandeln):
Beispiel
<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>
Navigationsleiste mit Symbolen
Beispiel
<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>
Die „fa fa“-Klassen im obigen Beispiel zeigen „Font Awesome“-Symbole an.
Erfahren Sie mehr über die Darstellung von Icons im Kapitel W3.CSS Icons .
Navigationsleistentext
Wenn Sie Text anstelle von Schaltflächen in der Navigationsleiste möchten, verwenden Sie die w3-bar-item- Klasse, um die gleiche Auffüllung wie die Schaltflächen zu erhalten.
Beispiel
<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>
Navigationsleiste mit Eingängen und Schaltflächen
Beispiel
<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>
Navigationsleiste mit Dropdown
Bewegen Sie die Maus über den "Dropdown"-Link:
Beispiel
<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>
Anklickbares Dropdown
Verwenden Sie w3-dropdown-click , wenn Sie lieber auf den Dropdown-Link klicken, anstatt den Mauszeiger zu bewegen:
Beispiel
<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>
Horizontales Dropdown-Menü
Entfernen Sie die w3-bar-block-Klasse aus dem Dropdown-Container, wenn Sie möchten, dass die Dropdown-Links horizontal statt vertikal angezeigt werden:
Beispiel
<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>
Responsive Navigationsleiste mit Responsive Dropdown
Verwenden Sie die w3-mobile-Klasse für alle Links, einschließlich des Dropdown-Containers, um eine responsive Navigationsleiste mit responsiven Dropdown-Links zu erstellen.
Ändern Sie die Größe des Browserfensters, um den Effekt zu sehen:
Beispiel
<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.