Wie man erstellt: Vertikales Menü

Wie man eine vertikale Schaltflächengruppe erstellt

Schritt 1 - Fügen Sie HTML hinzu:

<div class="vertical-menu">
  <a href="#" class="active">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

Schritt 2 - Fügen Sie CSS hinzu:

.vertical-menu {
  width: 200px; /* Sie können die Breite einstellen, wenn Sie möchten */
}
.vertical-menu a {
  background-color: #eee; /* Graue Hintergrundfarbe */
  color: black; /* Schwarze Textfarbe */
  display: block; /* Zeigt die Links hintereinander an */
  padding: 12px; /* Fügt einige Innenabstände hinzu */
  text-decoration: none; /* Entfernt die Unterstreichung der Links */
}
.vertical-menu a:hover {
  background-color: #ccc; /* Dunkelgraues Hintergrundfarbe beim Mausüberfahren */
}
.vertical-menu a.active {
  background-color: #04AA6D; /* Fügt dem 'Aktiv/aktuell' Link Grün hinzu */
  color: white;
}

Try it yourself

Vertikale Scrollleiste

Wenn Sie eine vertikale Scrollleiste wünschen, stellen Sie eine spezifische Höhe ein und fügen Sie hinzu overflow Eigenschaft:

.vertical-menu {
  width: 200px;
  height: 150px;
  overflow-y: auto;
}

Try it yourself

Related pages

Tutorial:How to create a sidebar navigation bar