Barra de Navegação Horizontal do CSS

Barra de navegação horizontal

Existem duas maneiras de criar uma barra de navegação horizontal: usandoInlineouFlutuanteItens de lista.

Item de lista inline

Uma maneira de construir uma barra de navegação horizontal é, além do código 'padrão' do capítulo anterior, definir o elemento <li> como inline:

Exemplo

li {
  display: inline;
}

Experimente pessoalmente

Explicação do exemplo:

display: inline; - Por padrão, o elemento <li> é um elemento de bloco. Aqui, removemos os caracteres de nova linha antes e depois de cada item da lista para que eles possam ser exibidos em uma linha.

Item de lista flutuante

Outra maneira de criar uma barra de navegação horizontal é flutuando os elementos <li> e definindo a disposição das links de navegação:

Exemplo

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Experimente pessoalmente

Explicação do exemplo:

  • float: left; - Use float para mover os elementos de bloco uns ao lado dos outros
  • display: block; - Mostrar o link como um elemento de bloco permite que toda a área do link seja clicável (não apenas o texto), e permite-nos especificar o preenchimento (se necessário, também largura, altura, margem, etc.).
  • padding: 8px; - Torne os elementos de bloco mais bonitos
  • background-color: #dddddd; - Adicione uma cor de fundo cinza a cada elemento

Dica:Se desejar um fundo de largura total, adicione background-color a <ul> em vez de cada elemento <a>:

Exemplo

ul {
  background-color: #dddddd;
}

Experimente pessoalmente

Exemplo de barra de navegação horizontal

Crie uma barra de navegação horizontal com fundo escuro e altere a cor de fundo do link quando o mouse estiver sobre ele:

Exemplo

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Mudar a cor do link para #111 (preto) ao passar o mouse */
li a:hover {
  background-color: #111;
}

Experimente pessoalmente

Link de navegação ativo/ativo

Adicionar a classe "active" ao link atual para que o usuário saiba em qual página ele está:

Exemplo

.active {
  background-color: #4CAF50;
}

Experimente pessoalmente

Alinhar os links para a direita

Alinhar os links para a direita flutuando os itens da lista (float:right;）：

Exemplo

<ul>
  <li><a href="#home">Início</a></li>
  <li><a href="#news">Notícias</a></li>
  <li><a href="#contact">Contato</a></li>
  <li style="float:right"><a class="active" href="#about">Sobre</a></li>
</ul>

Experimente pessoalmente

borda separadora

Adicionar border-right Atributo adicionado a <li> para criar um separador de links:

Exemplo

/* Adicionar uma borda direita cinza a todos os itens da lista, exceto o último (last-child) */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

Experimente pessoalmente

Barra de navegação fixa

Manter a barra de navegação na parte superior ou inferior da página, mesmo se o usuário rolar a página:

Fijado no topo

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

Experimente pessoalmente

Fijado no fundo

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Experimente pessoalmente

Atenção:A posição fixa pode não funcionar corretamente em dispositivos móveis.

Barra de navegação horizontal cinza

Exemplo de barra de navegação horizontal cinza com borda fina.

Exemplo

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

Experimente pessoalmente

Barra de navegação adesiva

Adicionar position: sticky;para criar uma barra de navegação adesiva.

Elementos adesivos alternam entre relativo e fixo com base na posição de rolagem. Eles são posicionados de forma relativa até encontrar a posição deslocada dada na área de visualização - então são 'colados' na posição apropriada (por exemplo, position:fixed).

Exemplo

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Experimente pessoalmente

Atenção:O Internet Explorer, Edge 15 e versões mais antigas não suportam a posição adesiva. O Safari requer o pré-fixo -webkit- (veja os exemplos acima). Você também deve especificar superior、direita、inferior ou esquerda Pelo menos um, para que a posição adesiva funcione.

Mais exemplos

Barra de navegação superior responsiva
Como usar consultas de mídia CSS para criar uma navegação superior responsiva.
Barra de navegação lateral responsiva
Como usar consultas de mídia CSS para criar uma navegação lateral responsiva.
Barra de navegação dropdown
Como adicionar menus dropdown na barra de navegação.