Postado por Micox - Náiron J. C. G..

07 Março, 2008

HOoooaa. E ae malucada.

Há um tempo eu venho brigando em busca do código de menu css drop-down perfeito.
Eu queria um menu dropdown css pra copiar e colar, simples, rápido, sem precisar de configurações.
Apenas copiar/colar no meu CSS, definir cor e largura dos itens, usar a classe no html e pronto. E tudo funcionando nos navegadores mais usados (FF, IE6/7, OP).

Ontem eu postei a peça que faltava (ativar hover no IE6 via css).
Veja o exemplo online (e o código fonte) do Ultimate Micox Menu Drop Down CSS até 4 níveis.

Bem, vamos aos códigos:
Primeiro é só fazer seu velho menu usando UL e LI.

<ul>
 <li>class='menu-hv'</li>
 <li><a href='#'>2</a></li>
 <li><a href='#'>3...</a>
  <ul style='background-color: red; '>
   <li>31</li>
   <li><a href='#'>32</a></li>
   <li>33</li>
  </ul>
 </li>
 <li><a href='#'>4...</a>
  <ul>
   <li>41</li>
   <li><a href='#'>42</a></li>
   <li><a href='#'>43...</a>
    <ul  style='background-color: blue'>
     <li>431</li>
     <li><a href='#'>432...</a>
      <ul  style='background-color: gray'>
       <li>4321</li>
       <li><a href='#'>4322</a></li>
      </ul>
     </li>
    </ul>
   </li>
   <li>44</li>
  </ul>
 </li>
</ul>

Depois você coloca a classe menu-hv no UL (ou no div pai de UL) para ativar o menu horizontal com submenus verticais. Para o menu vertical vertical (em pé) a classe é menu-vv.

<ul class='menu-hv'>

Por último é só colocar o código do Ultimate Micox Menu drop-down CSS (UMMDDCSS huahe) no seu arquivo CSS ou em um arquivo CSS separado. O local onde você pode alterar a cor, largura, etc dos itens do menu está indicado no código. Não mexa no resto pra não correr o risco de estragar.

/*
  Menus drop-down horizontal-vertical (hv) e vertical-vertical (vv) até 4 níveis
  by Micox - elmicox.blogspot.com - Ver. 2.0 - 20/02/08 - Creative Commons License
*/    
.menu-hv, .menu-vv { position: relative; margin: 0; padding: 0; display: block; zoom: 1;}
 .menu-hv * ,    .menu-vv * { margin: 0; padding: 0 ; list-style: none}
 .menu-hv li ,   .menu-vv li { position: relative; line-height: 1.2em; vertical-align: top }
 .menu-hv a ,    .menu-vv a { display: block; zoom: 1; line-height: 1.2em }
 .menu-hv li ul, .menu-vv li ul { position: absolute; visibility: hidden  }
 .menu-hv li:hover ul,  .menu-vv li:hover ul,
 .menu-hv li.hover ul,  .menu-vv li.hover ul { visibility: visible }
 .menu-hv li:hover ul ul,  .menu-vv li:hover ul ul,
 .menu-hv li.hover ul ul,  .menu-vv li.hover ul ul { visibility: hidden }
 .menu-hv li li:hover ul,  .menu-vv li li:hover ul,
 .menu-hv li li.hover ul,  .menu-vv li li.hover ul { visibility: visible }
 .menu-hv li li:hover ul ul,  .menu-vv li li:hover ul ul,
 .menu-hv li li.hover ul ul,  .menu-vv li li.hover ul ul { visibility: hidden }
 .menu-hv li li li:hover ul,  .menu-vv li li li:hover ul,
 .menu-hv li li li.hover ul,  .menu-vv li li li.hover ul { visibility: visible }
 /* características horizontal-vertical */
 .menu-hv:after, .menu-hv.after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden}
 .menu-hv li { float: left; }  
 .menu-hv li ul li { float: none; }
 .menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
 /* características vertical-vertical */
 .menu-vv { float: left; } 
 .menu-vv li ul { left: 100%; top: 0; }
 /* ****************************************
   ALTERE ABAIXO. defina a largura, cor, formatações, etc, dos itens do seu menu abaixo
   ou apague as linhas se for definir em outro lugar
 */
 .menu-hv li { width: 100px; background-color: yellow }
 .menu-vv li { width: 100px; background-color: yellow }
 .menu-hv li a:hover { background-color: cyan }
 .menu-vv li a:hover { background-color: cyan }

 
/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6
   http://elmicox.blogspot.com/2008/03/ativando-hover-e-first-child-no-ie-6-um.html 
   Deixe isto ao final de tudo do seu CSS pois o Webkit não interpreta nada mais abaixo do expression */
* html * { color: expression( (function(who){ if(!who.MXPC){
 who.MXPC = '1';
 if(who.nodeName != 'A'){
  who.onmouseenter=function(){ who.className += ' hover'};
  who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
 (who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }

Pronto! Agora ficou fácil fazer um menu drop down CSS. É só copiar e colar isso aí no código. Não precisa pegar javascript externo, não precisa quebrar cabeça com floats ou displays. É só colocar isto no seu documento e fazer seu menu ul-li.

Os espertos devem ter percebido que dá pra aumentar a quantidade de níveis facilmente adicionando novos níveis onde começa os visibility: hidden né? heheh

Bom, é isso aí. Dúvidas, é só postar lá no fórum. Até a próxima diversão.

Marcadores: menus, webstandards

E-mail Newsletter Feed RSS Resultado! Concursos Shopping Resultado

Não mande dúvidas nos comentários ou no meu e-mail. Mande elas para o fórum de desenvolvedores Webly. Tem mais gente lá gabaritada a responder e você não fica dependendo só do mico.

Comenta aí! Não cai o dedo e me incentiva a escrever mais. (23 comentários)

23 Comentários:

chrisloki disse... 09 Maio, 2008 11:05: Opa! Eu conhecia esse script, mas não sabia que rolava só com CSS pro IE6; fiz um código via javascript mesmo que fazia acho que a mesma coisa! Mto bom, vou tentar inserir isso...

E, se quiser, te mando um código que fiz para verificar se o menu abre por cima de elementos select e os esconde, se for no IE 6 (aquele velho problema dos selects ficarem sempre por cima).
Micox - Náiron J. C. G. disse... 09 Maio, 2008 13:44: Opa, valeu cara.
Depois manda o link do seu script ae.
Talvez dê pra adaptar dentro só do css também, daí eu te passo.
Adriana disse... 24 Julho, 2008 16:04: Testei no IE7 e no Firefox. ok - Mas no IE6 o hover ainda nao funciona ... O que fiz de errado?
Copiei e colei conforme 'instrucoes' :)
Micox - Náiron J. C. G. disse... 24 Julho, 2008 16:15: Tem algum link para eu ver o problema?
Qualquer coisa posta lá no fórum do webly: http://forum.ievolutionweb.com
Anônimo disse... 26 Julho, 2008 22:03: Meu nome eh Rangel: opa blz faz tempo ke busco por um menu dropdown em css, mas na net eh raro e agora encontrei esse, mto bom...mas gostaria de saber se ha alguma video aula sobre ele ke explique...para um melhor entendimento...agradecido desde ja..valeu!!!!! MICOXXXX t+

http://www.rangelweb.site88.net
Anônimo disse... 22 Agosto, 2008 08:39: Meu, PARABENS pelo menu! ele simples, facil rápido e sem complicação!
PARABENS mesmo!
Att,
Rogério
WRG
Tiago Faustino disse... 18 Setembro, 2008 17:57: Pois é... Ele tá abrindo atrás dos selects no IE6. Como se resolve isso?

Abração. E obrigado pelas dicas!
Micox - Náiron J. C. G. disse... 19 Setembro, 2008 07:19: Veja sobre este problema aqui: http://forum.ievolutionweb.com/index.php?showtopic=21049
Priscila disse... 01 Outubro, 2008 10:34: Micox,
Cara, adorei o seu menu, mas tenho uma dúvida: como fazer pra esse menu fechar ao ser clicado?? Pq ele só fecha quando dá o mouseout e aí os usuários leigos ficam meio perdidos quando esse menu é utilizado junto com ajax...
Priscila disse... 01 Outubro, 2008 11:50: Micox, eu resolvi esse problema fazendo um pequenino bacalhau no menu.
Eu usei onclick = "document.getElementById('submenu').style.visibility='hidden'" nos li´s dos submenus e onmouseover="document.getElementById('submenu').style.visibility='visible'" e onmouseout="document.getElementById('submenu').style.visibility='hidden'" no li que chama o submenu ul. Tá funcionando na boa, mas se depois vc achar uma maneira mais limpa pra fazer isso, seria legal :)

Valeu Micox!!!
Micox - Náiron J. C. G. disse... 01 Outubro, 2008 13:13: Olá Priscila, desculpe a demora em responder. Mas parece que você já conseguiu sua solução né?
Valeus.
Anônimo disse... 13 Outubro, 2008 11:30: cara...vc eh foda...hahahaha...
Tarcisio Castro disse... 12 Novembro, 2008 16:02: Olá cara,

Então, seu menu drop down é muito show. Porém, ele usa width para setar o tamanho do LI.

No meu caso, eu preciso que o tamanho da LI varie de acordo com o texto do menu, porém o maldito IE não interpreta quando uso padding no lugar do width.

Tem alguma luz de como resolver?
Se sim, o seu código vai ficar perfeito e hibrido para qualquer tipo de menu.

Abraços,
Tarcísio Castro
Micox - Náiron J. C. G. disse... 12 Novembro, 2008 16:06: CAra, na época que eu tava fazendo eu também precisava de li variável. Não deu pra sair. Só funfa (em todos os navegadores) com li fixo.
Tarcisio Castro disse... 12 Novembro, 2008 16:09: Valeu cara, obrigado pela pronta resposta.

Vou ter que guardar seu menu nos favoritos para um outro projeto e continuar estudando maneiras para construir um menu H-V com li variável.

Assumo o compromisso de postar aqui quando conseguir.

Abraços
Junior disse... 17 Novembro, 2008 13:46: bom eu nao sei se fiz certo mas a li ficou variavel.
eu setei o tamanho minimo q eu precisava no css.
ai no codigo eu setei o tamanho dos li individualmente com style.

claro q o drop quando abre abre do tamanho do li.
pra eu pelo menos deu certo.
Maykel disse... 19 Novembro, 2008 13:11: Junior, como você fez? também estou com este problema, uahhahu
Junior disse... 01 Dezembro, 2008 15:51: maikel foi mals a demora.
na tag li quando vc define o menu vc poem o seguinte style="width: 110px;"
nao da pra postar codigo aqui ne ?
\<\li style="width: 110px;"> texto \<\/\li\>
Márcia Régia Designer de Sobrancelhas disse... 21 Janeiro, 2009 23:32: oi micox beleza? cara to com um problemao da queles!!
meu pai ta querendo fazer um blog pra campanha da chapa que ele participa e ele ta inchendo o meu saco pra mim fazer os menus do jeito que ele viu no blog do ze dirceu se tu souber como vai isso (tenho certeza que voce sabe) e poder me ajudar eu agradeço muito!!! obrigado des de ja

ta aew o link pra tu ver, no menu tem:
HOME
BLOG DO ZE
JUVENTUDE
etc..
etc...
etc...
aew quando tu passa a mao no link juventuda aparece outros link´s do lado olha aew e me diz se tu sabe!!

http://www.zedirceu.com.br/index.php?option=com_content&task=blogcategory&id=27&Itemid=54

meu msn é djtrash_pedro@hotmail.com
mais vou voltar pra receber a resposta aqui no blogger.
caue disse... 20 Março, 2009 13:14: cara, achei foda eu tinha um mas nao funcionava no IE....

mas tem um problema(q acontece em outros scripts tambem)...

quando testo no IE6, aparece uma barra em ciam dizendo que "o IE impediu esse site de exibir conteudo ativo que possa acessar seu computador"..

é possivel fazer alguma manha que nao mostre essa mensagem e diga que esse script nao oferece riscos?

cauechassot@yahoo.com.br
Construções & Reformas disse... 19 Junho, 2009 10:23: olá muito bom mesmo seu código funcionou perfeitamente para mim no IE7 e IE8, só que no firefox 3 e no google chrome os sub sub menus não abriram...
você saberia o que está acontecendo?
o link seria esse:
http://support2.tempsite.ws/website/support/home.php
na opção produtos

obrigada...
Micox - Náiron J. C. G. disse... 19 Junho, 2009 13:49: Olá, você deve, para o menu funcionar corretamente, escrever a sequencia de UL-LI da maneira correta (conforme está no exemplo).

Coloque a classe menu-hv apenas no elemento pai de todos os LI.

No caso de LIs que tenham sub-menus, primeiro você abre o LI depois abre o UL do submenu e coloca os LIs lá dentro, e SÓ depos você fecha o LI inicial.
viniciuswebmaster disse... 02 Julho, 2009 14:05: Muito obrrigado pelo código!

Sou seu fã, e estou fazendo um blog inspirado em vc e no Majour...

mas, uma dúvida...
como eu faço pra centralizar meu menu horizontal?
Coloco ele numa tabela e centralizo a tabela?

vlw!

Escreva seu comentário (Leia abaixo).

Deixe seu email se quiser resposta por email também, pois o sistema de comentários do Blogger não me informa :( ... Ah, também pode deixar o endereço do seu blog ou site no comentário.
Já estou em outro sistema de blog melhor (wordpress). Se quiser comentar lá também :)
Dúvidas, só no fórum Webly.