Cómo crear: barra de menú vertical

Cómo crear un grupo de botones verticales

Primer paso - Añadir HTML:

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

Segundo paso - Añadir CSS:

.vertical-menu {
  width: 200px; /* Puede configurar el ancho si lo desea */
}
.vertical-menu a {
  background-color: #eee; /* Color de fondo gris */
  color: black; /* Color de texto negro */
  display: block; /* Mostrar los enlaces uno a uno */
  padding: 12px; /* Añadir algo de margen interno */
  text-decoration: none; /* Eliminar la subrayado de los enlaces */
}
.vertical-menu a:hover {
  background-color: #ccc; /* Fondo oscuro de grís al pasar el ratón */
}
.vertical-menu a.active {
  background-color: #04AA6D; /* Añadir verde a los enlaces 'activo/actual' */
  color: white;
}

Prueba por tu cuenta

Barra de menú vertical

Si desea una barra de menú vertical con desplazamiento, configure la altura específica y agregue overflow Atributo:

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

Prueba por tu cuenta

Páginas relacionadas

Tutorial:¿Cómo crear la barra de navegación lateral?