Jak utworzyć: pionowe menu

Jak utworzyć pionowy zestaw przycisków

Krok 1 - Dodaj 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>

Krok 2 - Dodaj CSS:

.vertical-menu {
  width: 200px; /* Możesz ustawić szerokość */
}
.vertical-menu a {
  background-color: #eee; /* Kolor szarego tła */
  color: black; /* Czarny kolor tekstu */
  display: block; /* Wyświetl linki jeden po drugim */
  padding: 12px; /* Dodaj pewną wewnętrzną margines */
  text-decoration: none; /* Usuń podkreślenie linku */
}
.vertical-menu a:hover {
  background-color: #ccc; /* Ciemnoszary tło przy nawigacji myszą */
}
.vertical-menu a.active {
  background-color: #04AA6D; /* Dodaj zielony do aktywnego/obecnego linku */
  color: white;
}

Spróbuj sam

Menu przewijalne w pionie

Jeśli chcesz, aby menu było przewijalne w pionie, ustaw konkretną wysokość i dodaj overflow Atrybuty:

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

Spróbuj sam

Strony związane

Tutorial:Jak utworzyć panel nawigacyjny bocznego