Como criar: barra de menu vertical

Como criar um grupo de botões verticais

Primeiro passo - Adicionar 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>

Segundo passo - Adicionar CSS:

.vertical-menu {
  width: 200px; /* Se desejar, você pode definir a largura */
}
.vertical-menu a {
  background-color: #eee; /* Cor do fundo cinza */
  color: black; /* Cor do texto preto */
  display: block; /* Exibir os links um ao lado do outro */
  padding: 12px; /* Adicionar um pouco de espaçamento interno */
  text-decoration: none; /* Remover sublinhado dos links */
}
.vertical-menu a:hover {
  background-color: #ccc; /* Fundo cinzento escuro ao passar o mouse */
}
.vertical-menu a.active {
  background-color: #04AA6D; /* Adicionar verde para links ativos/atuais */
  color: white;
}

Experimente você mesmo

Barra de menu vertical

Se você quiser que a barra de menu vertical faça rolagem, defina a altura específica e adicione overflow Atributo:

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

Experimente você mesmo

Páginas relacionadas

Tutorial:Como criar a barra de navegação lateral