tadarank afiliados

07 março, 2008

Ultimate Micox Menu drop-down CSS - até 4 níveis

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.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

32 comentários:

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

    ResponderExcluir
  2. 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.

    ResponderExcluir
  3. 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' :)

    ResponderExcluir
  4. Tem algum link para eu ver o problema?
    Qualquer coisa posta lá no fórum do webly: http://forum.ievolutionweb.com

    ResponderExcluir
  5. 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

    ResponderExcluir
  6. Meu, PARABENS pelo menu! ele simples, facil rápido e sem complicação!
    PARABENS mesmo!
    Att,
    Rogério
    WRG

    ResponderExcluir
  7. Pois é... Ele tá abrindo atrás dos selects no IE6. Como se resolve isso?

    Abração. E obrigado pelas dicas!

    ResponderExcluir
  8. Veja sobre este problema aqui: http://forum.ievolutionweb.com/index.php?showtopic=21049

    ResponderExcluir
  9. 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...

    ResponderExcluir
  10. 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!!!

    ResponderExcluir
  11. Olá Priscila, desculpe a demora em responder. Mas parece que você já conseguiu sua solução né?
    Valeus.

    ResponderExcluir
  12. cara...vc eh foda...hahahaha...

    ResponderExcluir
  13. 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

    ResponderExcluir
  14. 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.

    ResponderExcluir
  15. 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

    ResponderExcluir
  16. 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.

    ResponderExcluir
  17. Junior, como você fez? também estou com este problema, uahhahu

    ResponderExcluir
  18. 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\>

    ResponderExcluir
  19. 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.

    ResponderExcluir
  20. 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

    ResponderExcluir
  21. 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...

    ResponderExcluir
  22. 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.

    ResponderExcluir
  23. 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!

    ResponderExcluir
  24. Este comentário foi removido pelo autor.

    ResponderExcluir
  25. Opa, blz ?

    Desculpe por ressussitar seu post! mas foi de extrema utilidade pra mim, porém estou com uma dúvida, não exite alguma forma de validar o css daquele hack pela w3c ? fui validar ele não passou no hack...

    abraço!

    ResponderExcluir
  26. Coloca ele em outro arquivo css e insere este outro arquivo css via comentários condicionais do IE.

    ResponderExcluir
  27. opa
    boa noite galera
    muito bom o script, apartir desse criei o meu, só que uma duvida, no submenu, nivel2, se o texto for maior que o normal ele está quebrando blz por que coloca heigth=auto, mas aparece a cor do a hover, que faço???? veja funfando http://www.portaldasfeiras.net.br/teste/index.html
    no aguardo
    abraços

    ResponderExcluir
  28. Eu tentei aqui mas o meu submenu aparece na mesma linha do menu horizontal, gostaria que ele aparecesse abaixo, o que to fazendo de errado?

    ResponderExcluir
  29. cheguei a pensar que este menu era realmente perfeito, até eu encontrar uma falha que está me fazendo bater cabeça, quando o menu horizontal fica perto do limite da página na direita ele faz a página ficar com barra de rolagem horizontal para que os menus que estão ocultos possam ser exibidos, não consegui resolver isto se tiver uma solução agradeço.

    E parabéns pelo script.

    ResponderExcluir
  30. Cara, parabéns pelo script, ficou show!

    Cada projeto tem suas particularidades que nos forçam a modificar um atributo ou outro, mas da forma como está, ficou muito fácil modelar.

    Muito Obrigado!
    Att
    --
    Raphael,

    Pela data do post, acredito que já tenha resolvido, mas se alguém aparecer com o mesmo problema, será que colocar 'overflow:hidden;' na tag .menu-hv resolve?

    Um abraço

    ResponderExcluir
  31. Cara, parabéns pelo script, ficou show!

    Cada projeto tem suas particularidades que nos forçam a modificar um atributo ou outro, mas da forma como está, ficou muito fácil modelar.

    Muito Obrigado!
    Att
    --
    Raphael,

    Pela data do post, acredito que já tenha resolvido, mas se alguém aparecer com o mesmo problema, será que colocar 'overflow:hidden;' na tag .menu-hv resolve?

    Um abraço

    ResponderExcluir

Resultado! Concursos