CSS-horizontale Navigationsleiste

Horizontale Navigationsleiste

Es gibt zwei Methoden zur Erstellung einer horizontalen Navigationsleiste: die Verwendung vonInlineoderFloatingListenelemente.

Inline Listenposition

Eine Methode zur Erstellung einer horizontalen Navigationsleiste ist es, neben dem in Kapitel 1 verwendeten "Standard"-Code auch die <li>-Elemente als inline zu spezifizieren:

Beispiel

li {
  display: inline;
}

Probieren Sie es selbst aus

Beispiel

display: inline; - Standardmäßig sind <li>-Elemente Blockelemente. Hier löschen wir die Zeilenumbrüche vor und nach jedem Listenpunkt, damit sie in einer Zeile angezeigt werden können.

Floating Listenposition

Eine andere Methode zur Erstellung einer horizontalen Navigationsleiste ist das Floaten der <li>-Elemente und das Festlegen des Layouts für die Navigationslinks:

Beispiel

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Probieren Sie es selbst aus

Beispiel

  • float: left; - Verwenden Sie float, um Blockelemente nebeneinander zu schieben
  • display: block; - Zeigen Sie die Links als Blockelemente an, um den gesamten Linkbereich klickbar zu machen (nicht nur der Text), und ermöglichen Sie es uns, Füllungen (falls erforderlich, auch Höhe, Breite, Abstand usw.) zu spezifizieren
  • padding: 8px; - Machen Sie Blockelemente attraktiver
  • background-color: #dddddd; - Fügen Sie jedem Element eine graue Hintergrundfarbe hinzu

Hinweis:Fügen Sie den background-color für eine vollständige Breite hinzu, indem Sie ihn auf das <ul> anstatt auf jedes <a>-Element setzen:

Beispiel

ul {
  background-color: #dddddd;
}

Probieren Sie es selbst aus

Beispiel einer horizontalen Navigationsleiste

Erstellen Sie eine Grundebene horizontale Navigationsleiste mit dunklem Hintergrund und ändern Sie die Hintergrundfarbe der Links, wenn der Benutzer den Mauszeiger darauf bewegt:

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 Linkfarbe auf #111 (schwarz), wenn der Cursor über dem Link liegt */
li a:hover {
  background-color: #111;
}

Probieren Sie es selbst aus

Aktive / aktuelle Navigationsverbindung

Fügen Sie der aktuellen Verbindung die Klasse "active" hinzu, damit der Benutzer weiß, auf welcher Seite er sich befindet:

Beispiel

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

Probieren Sie es selbst aus

Rechtsausrichtung der Links

Justieren Sie die Links durch das Rechtsfliegen der Listeinträge (float:right;）：

Beispiel

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

Probieren Sie es selbst aus

Rahmenabtrenner

Fügen Sie border-right Eigenschaft zu <li> hinzufügen, um einen Link-Trenner zu erstellen:

Beispiel

/* Fügen Sie allen Listeinträgen einen grauen rechten Rahmen hinzu, mit Ausnahme des letzten Eintrags (last-child) */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

Probieren Sie es selbst aus

Feste Navigationsleiste

Halten Sie die Navigationsleiste am oberen oder unteren Rand der Seite, auch wenn der Benutzer die Seite scrollt:

Fest an der Oberseite

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

Probieren Sie es selbst aus

Fest am Boden

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

Probieren Sie es selbst aus

Hinweis:Die Position fixation kann auf mobilen Geräten möglicherweise nicht ordnungsgemäß funktionieren.

Graue horizontale Navigationsleiste

Beispiel einer grauen horizontalen Navigationsleiste mit feinen grauen Rahmen

Beispiel

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

Probieren Sie es selbst aus

Feste Navigationsleiste

Fügen Sie <ul> hinzu position: sticky;

Feste Elemente wechseln zwischen relativer und fester Position basierend auf derScrollposition. Es ist relativ positioniert, bis es im Ansichtsfenster die angegebene Verschiebeposition erreicht - dann wird es am geeigneten Ort "kleben" (z.B. position:fixed).

Beispiel

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Probieren Sie es selbst aus

Hinweis:Internet Explorer, Edge 15 und frühere Versionen unterstützen die feste Position nicht. Safari erfordert den Präfix -webkit- (siehe Beispiel oben). Sie müssen auch angeben oben,rechts,unten oder links Mindestens einer, damit die feste Position wirksam wird.

Mehr Beispiele

Responsive obere Navigationsleiste
Wie man mit CSS Medienabfragen eine responsive obere Navigationsleiste erstellt.
Responsive Seiten-Navigationsleiste
Wie man mit CSS Medienabfragen eine responsive Seiten-Navigationsleiste erstellt.
Dropdown-Navigationsleiste
Wie man ein Dropdown-Menü in der Navigationsleiste hinzufügt.