|
||
|
|
|
Avaliação:
![]() ![]() ![]() ![]() | Publicado em: 10/11/2006Menu css horizontal
Leonardo L Procopio (mas pode me chamar de Léo!). Sou tecnico de Informatica, faço curso de Analise e Desenvolvimento de Sistemas e trabalho com desenvolvimento em Delphi. Mas tenho uma grande paixão por web, e por isso sou um grande estudante de suas tecnologias.
Meu objetivo e transmitir o que sei de forma simples e descontraida!
Salve Galera!!! Bom, eu resolvi escrever alguns artigos, solucionando duvidas de pessoas que chegam até a mim.Então agora vou mostrar como criar um menu na horizontal, somente com css! Será que ainda é preciso dizer as vantagens de utilizar css?! Creio que não né! Primeira coisa que vamos começar é com a estrutura do nosso menu (e isso é muito importante). <ul id="menu_horizontal"> <li><a href=#>Principal</a></li> <li><a href=#>Editorial</a></li> <li><a href=#>Palestra</a></li> <li><a href=#>Ensinamento</a></li> <li><a href=#>Jovem</a></li> </ul> Temos aqui uma lista não-ordenada com o nome (id) "menu_horizontal", até ai nada de mais. Vamos colocar um css básico, pra retirar algumas coisas típicas da lista. Vou explicar porque fazer isso: as listas tem sempre algumas propriedades dela mesmo (não só lista, mas como todo elemento), ou seja, nos vamos zerar a margem (margin: 0;), os espaços (padding:0;), tirar o marcador de cada elemento da lista (list-style: none;) e vamos dar um tamanho pro nosso menu. Obs: coloquei a cor para podermos ir visualizando melhor. A css inicial fica assim: ul#menu_horizontal { background: #f7f7f7; list-style: none; margin: 0; padding: 0; width: 770px; } Próximo Passo!!! Ai você começa a olhar, e pensa o seguinte: "Eu sei que o ul é um elemento a nível de bloco, e o li também!!! E por isso é que ele faz essa quebra de linha antes e depois deles." Seu pensamento esta correto, mas, através da css nós podemos transformar elementos em bloco (display: block) ou também podemos retirar essa propriedade (display: inline;). Veja: ul#menu_horizontal li{ float: left; } Bom!!! Muito bom! Agora sim ta começando a parecer um menu horizontal! Podemos parar por aqui?! Não, ainda não!!! Temos algumas coisas a mudar! Vamos formatar diretamente o link, e fazendo o mesmo tomar conta de todo o li, usando display: block; dai então, podemos dar um tamanho, altura, formatar o texto, dar uma posicionada e colocar uma borda. De uma olhada nos comentários se aparecer duvidas: ul#menu_horizontal li a{ display: block; /* atribui ao link, o comando da parada toda! */ background: #ccc; /* corsinha cai bem */ width: 89px; /* tamanho */ height: 17px; /* altura */ _height: 20px; /* esse comando aqui só o ie vai entender, o ideal é coloca-lo de outra forma, no final eu mostro */ font: 11px Verdana; /* tamanho da fonte e tipo */ text-decoration: none; /* retira o sublinhado! Muito legal */ text-align: center; /* alinha o texto no centro (ta de sacanagem né!) */ color: #fff; /* cor do texto */ padding-top: 2px; /* espaço entre o topo do texto e a margem superior */ border: 1px solid #F2F2F2; /* formatando a borda! */ } Os comentários do código ajuda muito! Nós formatamos o estado natural do link, sem ele sofrer nenhum evento. A grande jogada fica no estado hover! (Esse estado é quando colocamos o mouse em cima dele). Então, lá vamos nós de novo!!! Obs: vou comentar só as partes diferente ou importante!!!! ul#menu_horizontal li a:hover{ font-weight: bold; /* aqui nos estamos colocando o texto em negrito! */ color: #2C2D32; border: 1px solid silver; } Agora você pode testar ai!! Mas ta feio Léo!!! (bonito não tá!!!) Mas ai é que entra o seu lado artístico. Altere o código, faça novas combinações, promova mudanças no código, pois só assim você vai dominar a técnica!!! Coloque sua imaginação p/trabalhar. Lembre-se de que você pode fazer confinações com as bordas, você tem o controle de cada uma, e pode fazer efeitos 3D e tudo mais! Sua imaginação é a unica ferramenta que não tem limites, invente!!! Veja aqui o resultado final e volte sempre!!! <?xml version="1.0" encoding="iso-8859-1"?> --------------------------------------------- msn: leonardomerce@hotmail.com Rio de Luz Artigos relacionados
desconhecido
ssdfsd : Não avaliado
OIa <oia@oi.com.br>
Tenta fazer um horizontal com dropdown!
![]() ![]() ![]() ![]() ![]() weverton <wevertonjaques1@hotmail.com>
você poderia deixar um link como o resultado final do código, pois isso facilitaria bastante para quem é iniciante em css. valeu.
![]() ![]() ![]() ![]() ![]() Leonardo L Procópio <leonardolp@gmail.com>
Nos próximos já vou colocar assim!
vlw ![]() ![]() ![]() ![]() ![]() pasquale <prof.pasquale@uol.com.br>
Nem preciso comentar né. Fugir da escola não te fez bem.
![]() ![]() ![]() ![]() ![]() Rafael Santos Costa <rafaelgsl@hotmail.com>
Boma Adorei esse tutorial me serviu muito..
OBrigado Continua sempre assim.. Abraços ![]() ![]() ![]() ![]() ![]() Chasles <charlesfonseca@hotmail.com>
valew gostei mt
![]() ![]() ![]() ![]() ![]() charise
ola
![]() ![]() ![]() ![]() ![]() studio <studioadrenalina@hotmail.com>
Muito bom muito bom valeu
![]() ![]() ![]() ![]() ![]() Arildo <arildo.oliveira@bol.com.br>
Valeu camarada, me ajudou muito, que Deus te abençoe por ajudar as pessoas.....
![]() ![]() ![]() ![]() ![]() Cinthia <cinthia.cpd@fadminas.org.br>
Parabéns pelo site e pelas dicas muito boas. Queria ver com vc como eu faço um menu vertical igual este seu do site? Eu trabalho com o site www.fadminas.org.br estamos reformando, eu não tenho espaço, pro isso preciso de um menu horizontal q me forneça espaço para sublinks, o modelo que vc apresentou é perfeito, mas precisaria saber como encaixo sublinks nele, queria q ficasse tipo o do seu site http://www.plugmasters.com.br/sys/materias/481/1/Menu-css-horizontal , desde já gradeço a atenção. Espero q possa me ajudar.
Um grande abraço Cinthia Medeiros ![]() ![]() ![]() ![]() ![]() Cinthia <cinthia.cpd@fadminas.org.br>
Parabéns pelo site e pelas dicas muito boas. Queria ver com vc como eu faço um menu vertical igual este seu do site? Eu trabalho com o site www.fadminas.org.br estamos reformando, eu não tenho espaço, pro isso preciso de um menu horizontal q me forneça espaço para sublinks, o modelo que vc apresentou é perfeito, mas precisaria saber como encaixo sublinks nele, queria q ficasse tipo o do seu site http://www.plugmasters.com.br/sys/materias/481/1/Menu-css-horizontal , desde já gradeço a atenção. Espero q possa me ajudar.
Um grande abraço Cinthia Medeiros ![]() ![]() ![]() ![]() ![]() Leonardo L Procópio <leonardolp@gmail.com>
Cinthia, me add no msn que te passo um link que vai te ajudar e muito!
Grande abraço! ![]() ![]() ![]() ![]() ![]() Leonardo L Procópio <leonardolp@gmail.com>
Arildo, estamos ai pra ajudar sempre!
Grande abraço! ![]() ![]() ![]() ![]() ![]() ![]() |
|
|