<
Menu

Tableless


admin-wordpress

Personalizando o painel de administração do WordPress

complex-pattern-responsive

Padrões Complexos de Navegação no Design Responsivo

iStock_000015515973Small

Quando utilizar (ou não) frameworks CSS

reponsive-foco

Responsive Web Design – focando a coisa certa


Criando um Menu Horizontal com CSS

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

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.

Quer 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.

<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>

Há também a possibilidade de utilizar o elemento <menu>, mas ainda está em rascunho no W3C.

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:

#menu ul {
	padding:0px;
	margin:0px;
	background-color:#EDEDED;
	list-style:none;
}

Terceiro:

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:

#menu ul li { display: inline; }

Pronto, as opções já estão na horizontal, mas ainda podemos melhorar adicionando um visual melhor para os links, melhorando a área do click.

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) tenham características de elementos de bloco, mas não quebrem linha, dessa forma conseguimos formatar características como largura, altura, margin, padding como se os links fossem blocos. 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:

#menu ul li a {
	padding: 2px 10px;
	display: inline-block;

	/* 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.

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

Essa é a forma resumida e simples sobre como fazemos todos os menus horizontais da face da terra.

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://about.me/diegoeis/

Mais posts do autor

Comentários (98)

  • 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

  • Cris Prata

    Ótima dica!! Fiz e ficou ótimo!

  • Leticia

    Não funcionou! Não mudo nada do que esta aqui!

  • Hohoho

    tem que clicar em salvar o arquivo no final

  • Seijy

    Como resolver este problema no IE?

  • Adriano

     em vez de usa

  • http://profile.yahoo.com/TMDNJWYOQE75Z2LULMKEKRUNZ4 Lucas

    como faz pra acrescentar um submenu?

  • Sidney Martins

     Entendi, só que o não passa no Validator do W3C, que me diz?

  • Pingback: Menu CSS horizontal multinível

  • joao paulo

    salvou minha vida tnx. eu odeio javascript+css :D

  • joao

    mto bom cara

  • Pingback: Joomla 2.5 • Re: Módulo de Login + Bootstrap | O Centro do Afiliado

  • http://www.facebook.com/people/Douglas-Aguiar/100000454094617 Douglas Aguiar

    Basta usar a regra:

    ul li:hover ul{ display:block; }

  • http://www.facebook.com/edynelton Edynelton Luiz Rio

    Bom, vou ressuscitar este topico aqui rs … To tentando usar menu, mas preciso de submenu, e essa parada ai de cima nao deu certo … Desde já agradeço a ajuda.

  • Wilson C.

    Boa explicação, mas venho tendo problemas ao tentar aplicar uma ‘background-image’ nos links e deixar ela com um tamanho homogêneo. Verticalmente funciona, mas horizontalmente não… Alguém conhece alguma solução pra isso? Obg

  • http://www.facebook.com/Renato.Estecio Renato Dos Santos

    e para colocar um sub menu? (2)

    tbm ñ estou conseguindo

  • Renilson Medeiros

    muito massa parabens
    ajuda muito para quem começo a pouco tempo
    obrigado me ajudo muito

  • Siwork

    Pessoal do IE, tenta colocar estas linhas.

  • Jorge

    Gostaria muito de saber como se faz um Submenu!
    obrigado.

  • Nícolas

    Também queria com submenu

  • J

    simples = inteligente=humilde ;)

  • http://www.facebook.com/yuritheoriginal Ynho Foxx

    Cara, Você é bom.. conseguiu fazer um tutorial simples explicativo e o resultado é perfeito.. Mereceu meu FeedBack

  • Comi sua mãe!

    Vão tudo se fuder homofóbicos retardados!

  • Anderson

    wow, meu valeuuuuuuuuuuuuuuuuuuuuu. E atenção vou robar o teu BOTTOM-MENU para o meu projecto. It worked like Charm

  • Bruna Furtado

    Poderia me informar como faço para criar um submenu? Aliás, muito bom o post! Parabéns!

  • Mateus

    como centralizar esse menu?

  • Tatiana

    Estou com uma dúvida: fiz uma lista conforme o tutorial e adicionei botões, porém eu queria afastar um pouco a distância de espaço entre os marcadores. Alguém tem alguma dica? Já procurei em outros lugares e nada ainda.

  • Ana

    Muuuuuuuito Bom!! Parabéns! Simples e objetivo :D

  • Marivaldo

    Quais linhas?

  • Luan Ramos

    Belo post. Simplificou tudo. Abraços. Obrigado.

  • Gleiner

    Muito bom post, porém estou com uma dificuldade.
    Eu quero posicionar as ‘caixa’ com os submenus abaixo dos items do menu horizontal um pouco mais abaixo dos menu porém sem perder o hover né.. Como fazer?

  • mouse

    display na linha tinha me esquecido desse comando
    valeu :)

  • Lucas Rodrigues

    Você só precisa adicionar no css da ul um text-align center.
    Exemplo:
    #menu ul{ text-align: center}

    Tudo que estiver dentro da div do menu vai ficar centralizado, se fizer isto alterando o valor center para:
    left (esquerda) ou
    right (direita) ou então
    justify (justificado) irá funcionar também.

  • Washington

    Pessoal do IE… vai pro Firefox, Chrome talvez. Ou vai a merda. Esquece o IE.

  • Cleyton Caetano

    você é o cara, vlw

  • Natan Roque

    Como definir a distância entre o texto do menu e o canto esquerdo?

  • EDUARDO

    TE AMO VEY ME SALVO :d

  • http://lincolnnogueira.com.br Lincoln Nogueira

    Parabéns excelente post

  • renan

    valew cara estava tentando fazer isso faz dias muito obrigado

  • David

    Dois problemas no artigo:

    1. Não mostra o resultado final;
    2: Não fala do XHTML

    Para que saiba quem se inicia em programação é o seu verdadeiro publico fiel. E nós começamos do inicio.