TUTORIAL CRIANDO MENU HORIZONTAL EM LISTA
Devido a falta de conhecimento dos usuarios da RZBR iniciantes em CSS , decidi fazer esse tutorial de como criar um menu em lista.
#PS: VOCE PODE LER E APRENDER ,OU COPIAR E NAO ENTENDER!
Oque é lista:
Lista é uma lista ordenada que o dreamweaver cria para variados finais.
Vamos lá!
Hum , o bom desse tutorial , é que eu vou encinar ao mesmo tempo como resetar a folha de CSS , simples :
no topo da folha :
*{margin:0; padding:0;}
O margin é o posisionamento e o padding é as bordas . Alguns Browsers já tem margin e padding pré-feitos , e com esse codigo no css , você reseta a folha.
Como criar o menu:
Simples , crie uma lista:
As <ul> são as aberturas das listas, e <li> são as iniciativa dos "paragrafos".Citação:
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Quem Somos</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Contato</a></li>
</ul>
E como todos devem saber , eu coloquei id , que é como o estilo do UL , ou seja, da lista.
Pronto , temos a lista , agora vamos ao CSS.
Isso significa , que não terá aquelas bolinhas redondas que fazem nas listas.Citação:
ul{
list-style-type:none;
}
Width é a largura e o margin 0 auto , é para centralizar , ao enves de usar <center>Citação:
ul#menu{
width:600px;
margin:0 auto;
}
Assim , especifica alista. O float ,é para colocar o menu na horizontal. A posição relativa ,é para obedecer ao float.Citação:
ul#menu li{
position:relative;
float:left;
}
PODE -SE USAR BORDER LEFT OU RIGHT COM UMA COR MAIS ESCURA QUE O MENU .. DA UM RESULTADO BEM LEGAL.Citação:
ul#menu li a{
display:block; - bloqueia o movimento caso clique e empurre
float:left;
padding:0 15px; - espaço como já mostrei em outro tuto
height:30px; - tamanho
line-height:25px; - tamanho de linha , se voce tira vai perceber oque é.
background:#090;
color:#FFF;
text-decoration:none;
}
Finalmente a parte do link no menu.
a parte do " li a " quer dizer que o link na lista será daquele modo, o link. Pode fazer ali dentro do seu jeito.
Como pode ver o background esta de uma cor, no hover se modifica.
E finalmente , o hover , é quando se passa o mouse em cima.Citação:
ul#menu li a:hover{
background:#096;
}
Apenas mudará a cor com o background.
É ISSO GENTE ,SE LERAM APRENDERAM , SE NAO LERAM COPIARAM , SE COPIARAM , NAO ENTENDERAM E CONTINUARAM SEM FAZER SUCESSO COM SUAS WEBS UAAUHAHU ;)
Resultado:
[Only registered and activated users can see links. Click Here To Register...]
Atualizado com foto.
Tutorial feito por: Nerdzinhu
CSS: Nerdzinhu
