CSS-Navigationsleiste

Vertical

Horizontal


Navigationsleiste

Der gekonnte Umgang mit der Navigationsleiste ist für jede Website sehr wichtig.

Mit CSS können Sie sie in eine gut aussehende Navigationsleiste verwandeln, statt in ein langweiliges HTML-Menü.

Navigationsleiste = Liste von Links

Als standardmäßige HTML-Grundlage ist eine Navigationsleiste notwendig.

In unserem Beispiel erstellen wir eine standardmäßige HTML-Listen-Navigationsleiste.

Eine Navigationsleiste ist im Grunde eine Liste von Links, daher ist die Verwendung der Elemente <ul> und <li> absolut sinnvoll:

Beispiel

<ul> <li><a href="#home">Startseite</a></li> <li><a href="#news">Neuigkeiten</a></li> <li><a href="#contact">Kontakt</a></li> <li><a href="#about">Über</a></li> </ul>

Selbst ausprobieren »

Jetzt entfernen wir margin und padding aus der Liste:

Beispiel

ul { list-style-type: none; margin: 0; padding: 0; }

Selbst ausprobieren »

Beispielanalyse:

  • list-style-type:none - Entfernt die Markierungen vor Listeneinträgen. Eine Navigationsleiste benötigt keine Listenmarkierungen.
  • Entfernen Sie die Standardeinstellungen des Browsers und setzen Sie margin und padding auf 0.

Der Code im obigen Beispiel ist der Standardcode, der sowohl für vertikale als auch horizontale Navigationsleisten verwendet wird.

Vertikale Navigationsleiste

Mit dem obigen Code müssen wir nur das <a>-Element formatieren, um eine vertikale Navigationsleiste zu erstellen:

Beispiel

a { display:block; width:60px; }

Selbst ausprobieren »

Beispielerklärung:

  • display:block - Zeigt den Link als Blockelement an, wodurch der gesamte Bereich zu einer anklickbaren Linkfläche wird (nicht nur der Text), und es ermöglicht uns, eine Breite anzugeben.
  • width:60px - Standardmäßig nehmen Block-Elemente die maximale Breite ein. Wir möchten eine Breite von 60 Pixeln angeben.

Tipp:AnsehenBeispiel einer vollständig gestylten vertikalen Navigationsleiste。

Hinweis:Geben Sie unbedingt die Breite des <a>-Elements in einer vertikalen Navigationsleiste an. Wenn die Breite weggelassen wird, kann IE6 unerwartete Ergebnisse liefern.

Beispiel für eine vertikale Navigationsleiste

Erstellen Sie ein einfaches Beispiel für eine vertikale Navigationsleiste und ändern Sie die Hintergrundfarbe, wenn die Maus über eine Option bewegt wird:


Beispiel

ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } /*Ändern Sie die Hintergrundfarbe, wenn die Maus über eine Option bewegt wird*/ li a:hover { background-color: #555; color: white; }

Selbst ausprobieren »

Beispiel für eine aktive/aktuelle Navigationsleiste

Nachdem eine Option angeklickt wurde, können wir die Klasse "active" hinzufügen, um anzugeben, welche Option ausgewählt ist:

Beispiel

li a.active { background-color: #4C7EAF; color: white; }

Selbst ausprobieren »

Links erstellen und Rahmen hinzufügen

Kann auf <li> oder <a> hinzugefügt werdentext-align:centerStil zum Zentrieren der Links.

Du kannstborderZu <ul> hinzufügenborderVerwende die Eigenschaft, um der Navigationsleiste einen Rahmen zu geben. Wenn du jeder Option einen Rahmen hinzufügen möchtest, kannst du ihn an jedem <li>-Element hinzufügen.border-bottom :

Beispiel

ul { border: 1px solid #555; } li { text-align: center; border-bottom: 1px solid #555; } li:last-child { border-bottom: none; }

Selbst ausprobieren »

Fixierte Navigationsleiste mit bildschirmfüllender Höhe

Als Nächstes erstellen wir links eine fixierte Navigationsleiste in voller Bildschirmhöhe und rechts scrollbaren Inhalt.

Beispiel

ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; height: 100%; /*Vollbildschirmhöhe*/ position: fixed; overflow: auto; /*Scrollen zulassen, wenn die Navigationsleiste viele Optionen hat*/ }

Selbst ausprobieren »

Hinweis:Dieses Beispiel kann auf Mobilgeräten verwendet werden.

Horizontale Navigationsleiste

Es gibt zwei Möglichkeiten, eine horizontale Navigationsleiste zu erstellen. Verwenden SieInlineoderFloatListenelemente.

Beide Methoden sind gut, aber wenn die Links die gleiche Größe haben sollen, müssen Sie die Float-Methode verwenden.

Inline-Listenelemente

Eine Möglichkeit, eine horizontale Navigationsleiste zu erstellen, besteht darin, die Elemente als inline anzugeben; der folgende Code ist das Standard-Inline:

Beispiel

li { display:inline; }

Selbst ausprobieren »

Beispielanalyse:

  • display:inline; - standardmäßig ist das<li>-Element ein Blockelement. Hier entfernen wir die Zeilenumbrüche vor und nach jedem Listenelement, um sie in einer Zeile anzuzeigen.

Tipp:AnsehenBeispiel einer vollständig gestalteten horizontalen Navigationsleiste。

Schwebende Listenelemente

Im obigen Beispiel haben die Links unterschiedliche Breiten.

Damit alle Links die gleiche Breite haben, floaten Sie die <li>-Elemente und geben Sie die Breite der <a>-Elemente an:

Beispiel

li { float:left; } a { display:block; width:60px; }

Selbst ausprobieren »

Beispielanalyse:

  • float:left - Verwenden Sie float, damit Blockelemente nebeneinander gleiten.
  • display:block - Zeigt den Link als Blockelement an, wodurch der gesamte Bereich zu einer anklickbaren Linkfläche wird (nicht nur der Text), und es ermöglicht uns, eine Breite anzugeben.
  • width:60px - Standardmäßig nehmen Block-Elemente die maximale Breite ein. Wir möchten eine Breite von 60 Pixeln angeben.

Tipp:AnsehenBeispiel einer vollständig gestalteten horizontalen Navigationsleiste。

Beispiel für eine horizontale Navigationsleiste

Erstellen Sie eine horizontale Navigationsleiste und ändern Sie die Hintergrundfarbe, wenn die Maus über eine Option fährt.

Beispiel

ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /*Ändern Sie die Hintergrundfarbe, wenn der Mauszeiger über eine Option fährt*/ li a:hover { background-color: #111; }

Selbst ausprobieren »

Beispiel für eine aktive/aktuelle Navigationsleiste

Nachdem eine Option angeklickt wurde, können wir die Klasse "active" hinzufügen, um anzugeben, welche Option ausgewählt ist:

Beispiel

.active { background-color: #4C7EAF; }

Selbst ausprobieren »

Rechtsbündige Links

Setzen Sie die am weitesten rechts stehende Option der Navigationsleiste auf rechtsbündige Ausrichtung (float:right;):

Beispiel

<ul> <li><a href="#home">Startseite</a></li> <li><a href="#news">Neuigkeiten</a></li> <li><a href="#contact">Kontakt</a></li> <li style="float:right"><a class="active" href="#about">Über</a></li> </ul>

Selbst ausprobieren »

Trennlinien hinzufügen

über <li>border-rightStil zum Hinzufügen von Trennlinien:

Beispiel

/*Fügen Sie Trennlinien zu allen Optionen außer der letzten hinzu (last-child)*/ li { border-right: 1px solid #bbb; } li:last-child { border-right: none; }

Selbst ausprobieren »

Fixierte Navigationsleiste

Sie können die Navigationsleiste der Seite oben oder unten fixieren:

Oben fixiert

ul { position: fixed; top: 0; width: 100%; }

Selbst ausprobieren »

Unten fixiert

ul { position: fixed; bottom: 0; width: 100%; }

Selbst ausprobieren »

Hinweis:Dieses Beispiel kann auf Mobilgeräten verwendet werden.

Graue horizontale Navigationsleiste

Graue horizontale Navigationsleiste

ul { border: 1px solid #e7e7e7; background-color: #f3f3f3; } li a { color: #666; }

Selbst ausprobieren »

Weitere Beispiele

Weitere Erweiterungen