Barra de Navegação Vertical do CSS
- Página anterior Barra de Navegação do CSS
- Próxima página Barra de Navegação Horizontal 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: }
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 { }
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; }
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; }
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-bottom
exceto o último elemento:
Exemplo
ul { border: 1px solid #555; } li { text-align: center; border-bottom: 1px solid #555; } li:last-child { border-bottom: none; }
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 */ }
Atenção:Este exemplo pode não funcionar corretamente em dispositivos móveis.
- Página anterior Barra de Navegação do CSS
- Próxima página Barra de Navegação Horizontal do CSS