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

  • http://soltaraovento.blogspot.com/ Duarte Costa

    Boas,

    No que diz respeito a um menu horizontal a minha questao é a seguinte. Temos uma série de itens que fazem parte do menu e que por definiçao, como no vosso exemplo, aparecem alinhados à esquerda. Se no mesmo menu além destes itens alinhados á esquerda eu quiser colocar também itens alinhados á direita (para além dos que ja estão à esquerda e nao em substituição destes) o que tenho que fazer?

    Muito obrigado e os melhores cumprimentos.

    Duarte Costa

  • http://beaglenetwork.blogspot.com Douglas Nascimento

    Cara ficou muito bom. Parabéns!!!

  • Anderson Alves Gomes

    Olá, achei mt útil seu tutorial de menu na horizontal, gostaria de saber como faço para centralizar os elementos do menu, e deixar num tamanho menor.

    Grato,

    Anderson

  • Diogenes

    minha camada div não cobre todos os elementos,
    ela fica 100% na horizontal e 1pixel na vertical… e normal isso?

  • paulo henrique

    diogenes:: isso acontece no IE naum eh??
    tenta isso ::quando iniciares o arquivo css coloca um ‘*’ q significa ‘em toda o codigo’ e zeras o margin e o padding nas propriedades assim oh

    * {margin: 0; padding:0 ;… }

    ve se da certo.

  • Diogenes

    É um bug que acontece quando uma div dentro de outra div está com a propriedade float definida.
    Tem como arrumar definindo uma altura fixa ou colocando uma outra div interna no final do código com a propriedade clear:both.
    Veja:

  • Diogenes

    (style type=”text/css”)
    (!–
    #all {width:500px;}
    #box1 {width:200px; float:right;}
    #box2 {width:200px;}
    .clr {clear:both;}
    –)
    (/style)
    (div id=”all”)
    (div id=”box1″)(/div)
    (div id=”box2″)(/div)
    (div class=”clr”)(/div)
    (/div)

  • http://www.samuelcorradi.com.br Samuel Corradi

    A questão é: Como faze-lo ficar centralizado, mas sem definir uma largura fixa (idependente de quantos itens o menu tiver).

  • http://gremioservindodeexemplo.blogspot.com/ fabio rodriguez

    na verdade vendo as pessoas colocando os recados dizendo que ficou bom outros com pequenos problemas de aperfeisoamento para finalizar seu menu horizontal, tenho ate vergonha de dizer na verdade o menu não tem nada de erado ele é otimo e adoraria ter ele em meu blog, mais o que acontece que não sei nem por onde comesar ja tentei diversas maneiras e não consigo estou perdendo o sono em busca de colocar um menu legal em meu blog igual a qualquer blog tem, mais não vou desistir ate conseguir parabens pelo trabalho, estou disposto a dicas se possivel e não me importaria se me mandasem uns emails bobocas me dando algumas dicas de como colocar um menu em meu blog! desculpas pelo boboca é que não me aguentei.

  • Diogenes

    1º Formatar a tag “ul”:
    margin: 0px; padding: 0px; list-style: none;

    2º Alinhas as tag “li” na mesma linha, como elas estão no modo display block, basta deixa-la em inline:
    display: inline;

    3º Colocar uns espaços entre os links (tag “a”):
    padding-right: 5px; padding-left: 5px;

    4º Caso queira centralizar o menu:
    text-align: center; ou
    text-align: left; ou
    text-align: right;

    5º Agora só usar as regras básicas de css para deixar o menu mais bonitinho.

    adorei o tutorial, aprendi muito pesquisando
    sobre float, display e outros.
    vlw

  • Diogenes

    O que falto no tutorial foi:

    Na 2º etapa para a tag “li” ao invés de
    colocar “display: inline;” pode colocar “float: left;” e
    para a 4º etapa, caso queira centralizar o menu, use:
    para a tag “div” defina um “width” e
    coloque as margens esquerda e direita em auto:
    margin-right: auto;
    margin-left: auto;

    Antes de terminar a “div menu” e depois da lista “ul” coloque uma outra div com “clear: both;”. É só para corrigir um buguezinho, mas não há necessidade de por essa “div”.

    nota: não vou posto o código aqui, porque buga.
    mas é isso aí. ^^

    Já, para por o menu em um blog, existem vários tutoriais na internet que ensinam ou até dá o código fonte completo, só procurar. ;)

    Espero ter ajudado todos…

  • Renato P

    Olá Diego

    Qual o motivo de não se usar display:inline-block ao invés de float:left ?

    Por ex, simplificar o HTML a:

    E no CSS:
    #menu a { display:inline-block; margin:0 4px 0 0; }

    Pesquisei na internet e quase não vi o uso do inline-block.

    Alguma luz?

    Obrigado!

  • Adriana

    Obrigada :)

  • http://www.bsainformatica.com.br Bruno Saguis

    Muito legal esse post, simples e rápido…

    Parabéns!

  • leonardo

    2 anos depois e o post ainda ajudando muita gente :D
    Parabéns me ajudou pacas.
    Vlwww

  • felipe

    muito bom cara parabens

  • Pingback: Menu CSS horizontal multinível | Marcus Monteiro

  • http://Artepana Pana

    PERFEITO! Isto ajuda muito, obrigado.

  • Japa

    Me desculpe quem gosta, mas, tem vezes que dá vontade de matar o Zé ruela que inventou esse troço de CSS, escrevemos muito mais códigos, e as vezes, ficamos perdidos com tanto comando maluco.
    O pobre do programador que se vire para descobrir como essa tralha funciona. E ainda dizem em “Boas Práticas” kkkkkkkkkkkkkkkk, Só rindo mesmo!!!

  • http://www.agencianeoweb.com.br Milton Meira

    Muito Obrigado Diego Eis, adoro CSS e tudo que tenho aprendido foi a partir daqui. Adorei esse menu, coube exatamente como desejava em meu projeto.
    Muito Obrigado e um abração.

    Dica:Crie um tut do menu da Globo, que tem vários níveis com estrutura lado a lado, é um menu muito requisitado na web e ainda não apareceu nada.

    Obrigado

  • Joelson Santos

    Muito bom sua dica, gostei muito valeeo:

  • Rômulo

    Bom mesmo. Valeu.

    Acho que seria bom declarar um “overflow: hidden” na div que contêm a nav do menu, não?

    Outra coisa: NAVs são suportadas pelo IE8? Porque no meu não funciona…

  • vinicius

    Pena que o IE escangalha tudo!

  • kadafi

    muito bom…deu certo.

  • http://naotenho Matheus

    Caro diego e estou com uma duvida , como eu coloco o menu horizontal no meio ?

  • Willian

    Ótimo post, ajudou bastante.

    Só uma coisa onde está “#menu ul li” deve se usar simplesmente “#menu li” sem o ul, pois #menu já se refere ao ul, claro que estou considerando que o id do ul seja menu.

    Até +. :)

  • Lucas

    boa noite Diego
    gostei muito do seu artigo sobre o menu vertical, a minha dúvida é o seguinte como eu faço para que o visitante ao
    clicar em um determinado link desses a página que se abrir o item do menu fique destacado em relação aos outros itens
    do menu.
    EX.:
    Quando clicar no link contato a página contato.html será carregada e o texto do menu com o nome fique destacado
    dos outros?

    E como eu faço para afastar mais as palavras e inserir uma linha entre elas?
    Espero que tenha entendido?
    qualquer dúvida entre em contato
    Abraço

  • RafaelJR

    Muito bom esse tutorial.

    Era o que estava procurando, me ajudou muito.

    Simples e objetivo.

    Perfeitoo !!!!

    Parabens

  • http://www.walterjoaquimdasilva.com.br Walter

    Simples e efetivo. Só gostaria de saber, se possível, se posso criar uma classe, em vez de um id, para usar esse mesmo menu mais de uma vez em uma mesma página.

  • http://www.avilakbt.blogspot.com Paulo Ávila

    Obrigado!funciona na perfeição.

  • http://rob3r7h.blogspot.com Rob3r7h

    Valeu, pela dica!

  • Natália

    MUITO OBRIGADA!

  • cardoso

    Gostei muito to seu artigo, bem explicado e util, parabéns…

  • Daniel Amorim

    Parabéns pela ajuda que vocês nos nos dão… Essas dicas são muito importantes para iniciantes como eu

  • Jefferson Rocha

    Gente, para deixar o menu de como central, devemos apenas fazer tudo o que fala o tutorial acima, sendo que na primeira parte (#MENU UL) adicionamos “text-align: center;” – Tente fazer isso, funciona perfeitamente, semprecisar ajustar nenhuma largura ou coisa do tipo.

    Espero que tenha ajudado.

    Att. Jefferson Rocha

  • Lucas Godgig

    Parabens! obg pela ajuda

  • Bolafranco

    muito objetivo era isso que procurava. Parabens, é tão simples cara, nos outros tutoriais o pessoal fazia um rodeio pra chegar em display: inline;
    VLW.

  • Drdarkbr

    perfect!!.. simples e objetivo!

  • Kevingarciafernandes

    Gay bixa

  • Gabriel Cutolo

    Gosti mano, brigadão pela ajuda :D !

  • Meu pau no teu cu

    Bixa e voce seu filho da puta

  • Gilberto

    show de bola mano si todo que quer ajuda fosse mais direto a sim era bom