Come creare: scheda verticale

Come creare un gruppo di pulsanti verticali

Primo passo - Aggiungi HTML:

<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>

Secondo passo - Aggiungi CSS:

.vertical-menu {
  width: 200px; /* Puoi impostare la larghezza se desideri */
}
.vertical-menu a {
  background-color: #eee; /* Colore di sfondo grigio */
  color: black; /* Colore del testo nero */
  display: block; /* Mostra i link uno accanto all'altro */
  padding: 12px; /* Aggiungi spazio interno */
  text-decoration: none; /* Rimuovi la sottolineatura del link */
}
.vertical-menu a:hover {
  background-color: #ccc; /* Sfondo scuro grigio quando il mouse è sopra */
}
.vertical-menu a.active {
  background-color: #04AA6D; /* Aggiungi verde ai link attivi/attuali */
  color: white;
}

Prova tu stesso

Scorciatoia verticale della scheda

Se si desidera una scorciatoia verticale della scheda, impostare l'altezza specifica e aggiungere overflow Proprietà:

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

Prova tu stesso

Pagine correlate

Tutorial:Come creare la barra di navigazione laterale