Barra de Navegação CSS

Demonstração: Barra de navegação

Barra de navegação vertical

Barra de navegação horizontal


Barra de navegação

Uma navegação fácil é importante para qualquer site.

Usando CSS, você pode transformar menus HTML chatos em barras de navegação bonitas.

Barra de navegação = lista de links

A barra de navegação precisa de HTML padrão como base.

Nossos exemplos usarão listas HTML padrão para construir a barra de navegação.

A barra de navegação basicamente é uma lista de links, portanto, usar os elementos <ul> e <li> é muito significativo:

Exemplo

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">Notícias</a></li>
  <li><a href="contact.asp">Contato</a></li>
  <li><a href="about.asp">Sobre</a></li>
</ul>

Experimente você mesmo

Agora, remova o item de lista, a margem e a espessura (preenchimento) da lista:

Exemplo

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Experimente você mesmo

Explicação do exemplo:

  • list-style-type: none; - Remova o item de lista. A barra de navegação não precisa de marcadores de lista.
  • Configurar margin: 0; e padding: 0; Remova as configurações padrão do navegador.

O código no exemplo acima é o código padrão usado nas barras de navegação vertical e horizontal, e você aprenderá mais sobre isso no próximo capítulo.