Barra de Navegação Vertical do CSS

Recomendações de cursos:

Barra de navegação vertical

Exemplo

largura: 200px;
  li a {
  Você também pode ajustar a largura do <ul> e remover a largura do <a>, pois quando exibidos como elementos de bloco, eles ocuparão todo o espaço disponível. Isso resultará no mesmo efeito que os exemplos anteriores:
}

Experimente você mesmo

Para construir uma barra de navegação vertical, além do código do capítulo anterior, você também pode ajustar o estilo dos elementos <a> na lista:

  • li a { Exemplo de explicação:
  • Você também pode ajustar a largura do <ul> e remover a largura do <a>, pois quando exibidos como elementos de bloco, eles ocuparão todo o espaço disponível. Isso resultará no mesmo efeito que os exemplos anteriores: - Exibir os links como elementos de bloco permite que toda a área do link seja clicável (e não apenas o texto), e podemos especificar a largura (se necessário, também podemos especificar o preenchimento interno, margem externa, altura, etc.).

- Pelo padrão, os elementos de bloco ocupam todo o espaço disponível. Precisamos especificar uma largura de 60 pixels.

Exemplo

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Você também pode ajustar a largura do <ul> e remover a largura do <a>, pois quando exibidos como elementos de bloco, eles ocuparão todo o espaço disponível. Isso resultará no mesmo efeito que os exemplos anteriores:
} 
largura: 200px;
  li a {
}

Experimente você mesmo

largura: 60px;

Exemplo de barra de navegação vertical

Exemplo

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Crie uma barra de navegação vertical com fundo cinza e altere a cor de fundo do link quando o usuário passar o mouse sobre ele:
  background-color: #f1f1f1;
}
largura: 200px;
  li a {
  display: block;
  cor: #000;
  padding: 8px 16px;
}
text-decoration: none;
/* Mude a cor do link ao passar o mouse */
  li a:hover {
  cor-fundo: #4CAF50;
}

Experimente você mesmo

cor-fundo: #555;

Link de navegação ativo/ativo

Exemplo

Adicione a classe "ativa" ao link atual para que o usuário saiba em qual página ele está:
  .ativa {
  cor-fundo: #4CAF50;
}

Experimente você mesmo

cor: white;

Centralize os links e adicione a borda text-align:center ao <li> ou <a> para centralizar os links.

Adicione border Adicione a propriedade de borda ao <ul>, adicionando uma borda ao redor da barra de navegação. Se você também desejar adicionar uma borda dentro da barra de navegação, adicione a propriedade de borda a todos os elementos <li>. border-bottomexceto o último elemento:

Exemplo

ul {
  border: 1px solid #555;
}
li {
  text-align: center;
  border-bottom: 1px solid #555;
}
li:last-child {
  border-bottom: none;
}

Experimente você mesmo

Barra de navegação vertical fixa de altura total

Crie uma navegação lateral fixa de altura total:

Exemplo

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Tamanho total */
  position: fixed; /* Faz com que ele fique adesivo, mesmo ao rolar */
  overflow: auto; /* Habilita a barra de rolagem se o conteúdo da barra lateral for muito longo */
}

Experimente você mesmo

Atenção:Este exemplo pode não funcionar corretamente em dispositivos móveis.