Conheça o Plugfeed | » Início » Desenvolvimento » CSS e Tableless » Menu css horizontal
Conheça o Plugfeed | » Início » Desenvolvimento » CSS e Tableless » Menu css horizontal -->
 
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).    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!!!                         ---------------------------------------------msn: leonardomerce@hotmail.com
twitter.com/eek_
relatosnoturno.blogspot.com

desconhecido
ssdfsd : Não avaliado
Tenta fazer um horizontal com dropdown!


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
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
valew gostei mt
charise
ola
Muito bom muito bom valeu
Valeu camarada, me ajudou muito, que Deus te abençoe por ajudar as pessoas.....
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
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!
Valeu cara!
To fazendo um site e algo simples q vc me ajudou a ver um erro no meu cod. abco
Gostei muito das esplicações em vermelho, me ajudaram e muito ao modificar o meu menu

Obrigado
Ótimos exemplos. Aprendi muito com eles.
Busquei em vários sites e só aqui consegui resolver o meu problema!!! PARABÉNS!!!
desconhecido
ruim : Não avaliado
ei cara, se vc for o administrador do site, no menu bando de scripts o submenu XML ta por baixo da propagando flw.... abraços e belo site.
Olá!

Gerei um menu bem parecido com o deste forum através do link: http://www.mycssmenu.com/visual_interface/template17/template.html


Agora quero colocar som como no link: http://dhtml-menu.com/menu/dhtml-vertical-menu-sound-support-sample.html


Aqui tem um codigo que insere som nos links: http://www.dynamicdrive.com/dynamicindex11/javascriptsound.htm

Porém o codigo nao funciona com o menu estilizado.

Solicito suporte, pagarei pelo codigo.

Obrigado .

Angelo
O site Plugmasters não está rodando corretamente no FF
asdf asdf asdf
asdf testando... um dois três... tchau








Um produto Detetive.net