Avaliação: | Publicado em: 10/11/2006

Menu css horizontal

Leonardo L Procopio (mas pode me chamar de Léo!). Sou formado em Analise e Desenvolvimento de Sistemas. Trabalho com desenvolvimento deskop e web. Meu objetivo e transmitir o que sei de forma simples e descontraída!

Menu css horizontal

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

     
• Principal
     
• Editorial
     
• Palestra
     
• Ensinamento
     
• Jovem
 

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

 
• Principal
 
• Editorial
 
• Palestra
 
• Ensinamento
 
• Jovem
 

  ---------------------------------------------msn: leonardomerce@hotmail.com
twitter.com/eek_
relatosnoturno.blogspot.com

• Menu css com rollover de imagem