CSS Navigationsleiste
Mit CSS können Sie langweilige HTML-Menüs in gut aussehenden Navigationsleisten verwandeln.
Navigationsleiste = Linkliste
Eine Navigationsleiste muss Standard-HTML als Basis.
In unseren Beispielen werden wir die Navigationsleiste aus einer Standard-HTML-Liste erstellen.
Eine Navigationsleiste ist im Grunde eine Liste von Links zu verwenden, da die
- und
- Elemente macht Sinn:
Der Code in dem obigen Beispiel ist der Standard-Code in den beiden vertikalen verwendet und horizontalen Navigationsleisten.
Vertikale Navigation Bar
Um eine vertikale Navigationsleiste zu erstellen, können Sie Stil der Elemente innerhalb der Liste, zusätzlich zu dem obigen Code:
li a display: block;
Breite: 60px;
>Sie können auch die Breite
- , und entfernen die Breite , da sie die volle Breite verfügbar nehmen wird, wenn sie als Blockelemente angezeigt. Dies wird das gleiche Ergebnis wie unser vorheriges Beispiel erzeugen:
- oder die Links zu zentrieren.
Fügen Sie die Grenze Eigenschaft
- einen Rahmen um den navbar hinzuzufügen. Wenn Sie auch Grenzen innerhalb der Navigationsleiste wollen, fügen Sie ein border-bottom allen
- Elemente, mit Ausnahme der letzten:
ul border: 1px solid # 555;
>li text-align: center;
border-bottom: 1px solid # 555;
>li: last-child border-bottom: none;
>Volle Höhe Feste Vertikal Navbar
Erstellen Sie eine volle Höhe, „sticky“ Seite Navigation:
Hinweis: Dieses Beispiel nicht richtig auf mobilen Geräten funktionieren könnte.
Horizontale Navigationsleiste
Es gibt zwei Möglichkeiten, um eine horizontale Navigationsleiste zu erstellen. Mit Inline-oder Floating-Listenelemente.
Inline-Listenelemente
Eine Möglichkeit, eine horizontale Navigationsleiste zu bauen, ist die angeben
- Elemente als inline, zusätzlich zu dem „Standard“ Code oben:
li display: inline;
>- Anzeige: inline; - In der Standardeinstellung
- Elemente sind Blockelemente. Hier entfernen wir die Zeilenumbrüche vor und nach jedem Listeneintrag, so dass sie in einer Zeile angezeigt werden
Schwimmdock Listenelemente
Ein anderer Weg, um eine horizontale Navigationsleiste zu schaffen, ist die schweben
- Elemente und ein Layout für die Navigationslinks angeben:
eine Anzeige: Block;
padding: 8px;
background-color: #dddddd;
>Tipp: Fügen Sie die Hintergrund-Farbe
- Elemente, mit Ausnahme der letzten:
li a display: block;
>Vertikale Navigationsleiste Beispiele
Erstellen eine einfache vertikale Navigationsleiste mit einem grauen Hintergrundfarbe und ändern Sie die Hintergrundfarbe der Links, wenn der Benutzer mit der Maus über sie bewegt:
/ * Die Linkfarbe auf schweben ändern * /
li a: Hover-background-color: # 555;
Farbe weiß;
>Aktiv / Aktuelle Navigation Verbindungs
Fügen Sie eine „aktive“ Klasse auf den aktuellen Link der Benutzer weiß, welche Seite er / sie auf:
aktiv background-color: # 4CAF50;
Farbe weiß;
>Mitte Links - Rand hinzufügen
In text-align: center zu
- oder die Links zu zentrieren.