Fazendo um menu horizontal
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 div e atribua uma ID para este div, neste exemplo nosso div se chamará “menu”. Dentro deste div, faça uma lista, esta lista deve conter as opções de seu menu:
<div id=”menu”>
<ul>
<li><a href=”">Primeiro</a></li>
<li><a href=”">Segundo</a></li>
<li><a href=”">Terceiro</a></li>
<li><a href=”">Quarto</a></li>
<li><a href=”">Quinto</a></li>
</ul>
</div>
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;
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:
#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.
#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.
#menu ul li a:hover {
background-color:#D6D6D6;
color: #6D6D6D;
border-bottom:3px solid #EA0000;
}
11 Comentários
Duarte Costa 28/02/2008 às 13:12
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
Douglas Nascimento 11/05/2008 às 09:38
Cara ficou muito bom. Parabéns!!!
Anderson Alves Gomes 16/05/2008 às 11:35
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 03/06/2008 às 11:41
minha camada div não cobre todos os elementos,
ela fica 100% na horizontal e 1pixel na vertical… e normal isso?
paulo henrique 26/06/2008 às 13:39
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 01/07/2008 às 06:43
É 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 01/07/2008 às 06:46
(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)
Samuel Corradi 05/09/2008 às 19:20
A questão é: Como faze-lo ficar centralizado, mas sem definir uma largura fixa (idependente de quantos itens o menu tiver).
fabio rodriguez 18/10/2008 às 05:04
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 02/11/2008 às 13:10
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 02/11/2008 às 15:02
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…