CSS-vertikale Navigationsleiste

Kursempfehlungen：

Vertikale Navigationsleiste

Beispiel

width: 200px;
  li a {
  Sie können auch die Breite von <ul> einstellen und die Breite von <a> löschen, da sie als Blockelemente die gesamte verfügbare Breite einnehmen werden. Dies führt zu dem gleichen Ergebnis wie in unseren vorherigen Beispielen：
}

Probieren Sie es selbst aus

Um eine vertikale Navigationsleiste zu erstellen, können Sie neben dem Code aus dem vorherigen Kapitel auch die Stile der <a> Elemente in der Liste festlegen：

  • li a { Beispiel erläutert：
  • Sie können auch die Breite von <ul> einstellen und die Breite von <a> löschen, da sie als Blockelemente die gesamte verfügbare Breite einnehmen werden. Dies führt zu dem gleichen Ergebnis wie in unseren vorherigen Beispielen： - Zeigen Sie die Links als Blockelemente an, damit das gesamte Linkbereich geklickt werden kann (nicht nur der Text), und Sie können auch Breite angeben (falls erforderlich, auch Innenabstand, Außenabstand, Höhe usw.).

- Standardmäßig nehmen Blockelemente die gesamte verfügbare Breite ein. Wir müssen eine Breite von 60 Pixeln angeben.

Beispiel

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Sie können auch die Breite von <ul> einstellen und die Breite von <a> löschen, da sie als Blockelemente die gesamte verfügbare Breite einnehmen werden. Dies führt zu dem gleichen Ergebnis wie in unseren vorherigen Beispielen：
} 
width: 200px;
  li a {
}

Probieren Sie es selbst aus

width: 60px;

Beispiel für vertikale Navigationsleiste

Beispiel

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Erstellen Sie eine Grundlegende vertikale Navigationsleiste mit einer grauen Hintergrundfarbe und ändern Sie die Hintergrundfarbe des Links, wenn der Benutzer den Cursor auf den Link bewegt：
  background-color: #f1f1f1;
}
width: 200px;
  li a {
  display: block;
  color: #000;
  padding: 8px 16px;
}
text-decoration: none;
/* Ändern Sie die Linkfarbe beim Cursorüberfahren */
  li a:hover {
  background-color: #4CAF50;
}

Probieren Sie es selbst aus

background-color: #555;

Aktive/aktuelle Navigationslinks

Beispiel

Fügen Sie die "active" Klasse zum aktuellen Link hinzu, damit der Benutzer weiß, auf welcher Seite er sich befindet：
  .active {
  background-color: #4CAF50;
}

Probieren Sie es selbst aus

color: white;

Zentrieren Sie die Links und fügen Sie Umrandungen hinzu text-align:center zu <li> oder <a>, um die Links zentriert anzuzeigen.

hinzufügen Umrandung Eigenschaft hinzufügen zu <ul> und eine Umrandung um die Navigationsleiste hinzufügen. Wenn Sie auch eine Umrandung innerhalb der Navigationsleiste hinzufügen möchten, fügen Sie für alle <li> Elemente eine border-bottom，außer dem letzten Element：

Beispiel

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

Probieren Sie es selbst aus

Volle Höhe feste vertikale Navigationsleiste

Erstellen Sie eine volle Höhe "klebende" Seitennavigation:

Beispiel

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Ganze Höhe */
  position: fixed; /* Es macht es kleben, selbst wenn es sich scrollt */
  overflow: auto; /* Wenn der Inhalt der Seitenleiste zu viel ist, wird der Scrollbalken aktiviert */
}

Probieren Sie es selbst aus

Hinweis:Dieser Beispiel könnte auf mobilen Geräten nicht ordnungsgemäß funktionieren.