Tableless - Desenvolvimento inteligente com Padrões Web

06/12/2007
Artigos

Criando um Menu Horizontal com CSS

Aprenda como criar um menu horizontal padrão com CSS.

Por

Se você não quiser ler, mas ver como fazer, assista um vídeo. Neste vídeo é mostrado como fazer um menu horizontal com CSS. E se quiser aprender mais, visite o Campus Online e cadastre-se grátis para ver vídeos sobre desenvolvimento web.

Para fazer um menu horizontal que seja fácil de personalizar e de fazer manutenção?
Siga os passos abaixo e descubra como é fácil.

Estrutura:

Primeiramente faça um elemento NAV (antigamente usaríamos a tag DIV) e atribua um ID. Neste exemplo nossa NAV se chamará “menu”. Dentro desta NAV, faça uma lista com as opções do menu.

1
2
3
4
5
6
7
8
9
<nav id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Produtos</a></li>
        <li><a href="#">Missão</a></li>
        <li><a href="#">Links</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
</nav>

Começando a formatação:

Agora que já fizemos a estrutura do menu, vamos formatá-lo com css.
Primeiro, para podermos trabalhar melhor, vamos tirar o margin (margin:0px;), o padding (padding:0px;) e os Bullets das opções (list-style:none;) da tag UL. Queremos que o UL seja uma barra de navegação certo? Então vamos fazer ele flutuar à esquerda (float:left), depois damos a ele a largura de 100% (width:100%;), isso fará com que ele vire uma bloco. Veja o código css atribuído à tag UL:

1
2
3
4
5
6
7
8
#menu ul {
    padding:0px;
    margin:0px;
    float: left;
    width: 100%;
    background-color:#EDEDED;
    list-style:none;
}

Terceiro:

Nosso menu ainda não está horizontal… agora é hora de resolver isso.
Para o nosso menu ficar horizontal, temos que fazer as suas opções ficarem uma ao lado da outra… para isso, basta atribuir um display:inline; para a tag LI… Isso fará todas as opções ficarem em uma linha horizontal:

1
#menu ul li { display: inline; }

Deixando o menu na horizontal:

Ótimo. Estamos quase acabando nosso menu horizontal, agora falta pouco.
Precisamos apenas formatar os links do menu para que eles não fiquem tão próximos um do outro. No css, faça que todos os links que estão dentro da tag LI (#menu ul li a) flutuem à esquerda (float:left;), isso é necessário para que os links se transformem em bloco. Agora, dê um espaço entre a borda do menu e o texto, para isso use o padding (padding: 2px 10px;).
Você pode aproveitar para definir o “visual” que deverá ter o link: cor de fundo, letra, etc…
Veja o código css que escrevemos neste passo.

1
2
3
4
5
6
7
8
9
#menu ul li a {
    padding: 2px 10px;
    float:left;
    /* visual do link */
    background-color:#EDEDED;
    color: #333;
    text-decoration: none;
    border-bottom:3px solid #EDEDED;
}

Vamos ver no que deu!

Para finalizar, vamos apenas definir o que deverá acontecer com o link quando o usuário passar o mouse. Este passo dispensa explicações.

1
2
3
4
5
#menu ul li a:hover {
    background-color:#D6D6D6;
    color: #6D6D6D;
    border-bottom:3px solid #EA0000;
}

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

← Older Comments
  • Luzdeespirito

    Substitui a nav por div, pois o css que estou trabalhando é 2.1, porém me deparei com um problema, ao clicar em um dos itens do menu, me levou a uma página e nesta pagina outro link. Quando cliquei no menu novamente ele retorna acrescentando o nome da ultima pasta do clicada.
    Me ajudem!

  • Bruno Veiga

    Valeu… Simples mas ainda não tinha parado pra aprender… =) Obrigado!

  • Murilo

    Muito bom, me ajudou muito.

  • meu nome

    Nossa, deveria ter um exemplo para ver né? ou uma imagem…É a lei de qualquer tutorial, mostrar o resultado antes.

  • Cição

    concordo

  • Jnetojn

    Bando de viados

  • Pedro

    mo bosta o IE

  • Gessicaabc

    não esta tão claro assim

  • Andre mkw

    valeu cara otimas dicas, parabesns

← Older Comments