Avatar

Menu Drop-down Css

Menus horizontal e vertical

Escrito por Micox em WebStandards e CSS. Data: 04/09/2006

Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original

Ver tópico original no fórum.

Atenção:
já fiz um sistema muito melhor de menus drop down. Sem necessitar de tag script pra definir o hover no IE. Dê uma olhada: Ultimate Micox Menu Drop Down CSS - Feito 05/03/2008



Menu Horizontal, sub-menu Horizontal
mais abaixo, estão postados outros tipos de menu

Testado em: Firefox 1.5 ; Internet Explorer 6.0 ; Opera 8.5.

Postado inicialmente no meu blog: Menu Horizontal, Sub-Menu Horizontal - Menus CSS 1



Mostrarei aqui um código pronto para fazer seu menu drop-down CSS horizontal, com sub-menus horizontais de até 3 níveis.
Não farei tutorial, não explicarei o funcionamento, nem como cheguei até este código.
Para isto existem inúmeros sites. Estude CSS se quiser entender ou poste uma pergunta no fórum iEvolution sobre CSS original.gif
Se quiser pular as etapas e já pegar o código pronto, vá até o final deste post.

Uma prévia do menu pode ser vista em um site que eu estou desenvolvendo: www.lgcom.com.br (este tem apenas 2 níveis, mas pode ser expandido para 3)





Etapa 1 - O Código (X)HTML

1.1 - Faça um Menu qualquer baseado em listas UL.
1.2 - Coloque a classe "menu-hh" no seu UL ou em qualquer elemento pai dele que desejar.

Exemplo:

CODE
<div  class="menu-hh">
  <ul>
    <li><a  href="quem-somos.asp">Quem somos</a></li>
    <li><a  href="produtos.asp">Produtos</a>
              <ul>
                <li><a  href="radios-portateis.asp">R&aacute;dios  port&aacute;teis</a>
                          <ul>
                            <li><a  href="2.htm">Sub-menu 3</a></li>
                            <li><a  href="2.htm">Sub-menu 3</a></li>
                            <li><a  href="2.htm">Sub-menu 3</a></li>
                            <li><a  href="2.htm">Sub-menu 3</a></li>
                          </ul>
                 </li>
                 <li><a href="radios-moveis.asp">R&aacute;dios  m&oacute;veis</a></li>
                 <li><a  href="repetidoras.asp">Repetidoras</a></li>
                 <li><a href="sistemas-hf.asp">Sistemas  HF</a></li>
                 <li><a  href="acessorios.asp">Acess&oacute;rios</a></li>
              </ul>
    </li>
    <li><a  href="revendas.asp">Revendas</a>
              <ul>
                 <li><a href="2.htm">Sub-menu 2</a>
                          <ul>
                            <li><a  href="2.htm">Sub-menu 3</a></li>
                            <li><a  href="2.htm">Sub-menu 3</a></li>
                            <li><a  href="2.htm">Sub-menu 3</a></li>
                          </ul>
                 </li>
                 <li><a href="2.htm">Sub-menu  2</a></li>
                 <li><a href="2.htm">Sub-menu  2</a></li>
              </ul>
    </li>
    <li><a  href="cotato.asp">Solicite uma  cota&ccedil;&atilde;o</a></li>
    <li><a  href="assistencia-tecnica.asp">Assist&ecirc;ncia  t&eacute;cnica</a></li>
    <li><a  href="locacao.asp">Loca&ccedil;&atilde;o</a></li>
    <li><a  href="contato.asp">Contate-nos </a></li>
  </ul>
  </div>



Etapa 2 - O código CSS

2.1 - Adicione as declarações abaixo no seu arquivo CSS.
2.2 - Como o Opera pede width para elementos posicionados com absolute (devidamente), eu usei a técnica do display table para resolver este problema do width no Opera
2.3 - Se for necessário realiza alterações pra melhorar o visual, faça fora destas declarações pra não correr o risco de "estragá-las" (a não ser que você entenda bem de CSS né?). Aguarde, mostrarei como fazer estas alterações na etapa 4.
CODE
/* menu horizontal by micox */
.menu-hh { display: table; }
.menu-hh * { margin: 0; padding: 0;}
.menu-hh a { display: block; }
.menu-hh li { list-style: none; float: left; height: 1%; }
.menu-hh li ul { position: absolute; visibility: hidden; white-space: nowrap;}
/* hack para navegadores que exigem width para elementos pos absolute (Opera) */
html:first-child>body .menu-hh li ul { width: 500px; }
.menu-hh li:hover ul, .menu-hh  li.over ul { visibility: visible;} /* a class  .over eh tecnica pro hover no IE */
.menu-hh li:hover ul li ul, .menu-hh li.over ul li ul{ visibility: hidden;}
.menu-hh li ul li:hover ul, .menu-hh li ul li.over ul{ visibility: visible;}
/* visual */
.menu-hh { background-color: #F60; width: 90%; margin: 0 0 0 12px; height: 31px;}
  .menu-hh a { font-weight: bold; text-decoration: none; color: #000; padding: 0 10px; line-height: 20px;}
  .menu-hh a:hover { text-decoration: underline; background-color: #DF2800;}
  .menu-hh ul li ul { background-color: #DF2800; border: 1px solid #000; }


Etapa 3 - JavaScript pra ativar o hover (.over) no IE

3.1 - Como já sabe, o IE não interpreta a pseudo-classe ":hover". Por este motivo, você (geralmente) verá nos menus CSS uma declaração contendo também um seletor com a classe ".over" e será necessário adicionar uma solução JavaScript pra simular o comportamento do ":hover". Para saber mais sobre isto, leia aqui na explicação do Maujor.
3.2 - Adicione a seguinte chamada ao JavaScript no seu código (X)HTML:
CODE
<!--[if lte IE 6]>
  <script type="text/javascript" src="funcoesIE.js"></script>
  <![endif]-->

3.3 - Crie um arquivo chamado funcoesIE.js
3.4 - Coloque o seguinte código dentro deste arquivo java script:
CODE
function DOMgetElementsByClassName($node,$className){
       /* Description: retorna um array com todos os elementos dentro
          de $node que possuam a classe indicada em $className
       Versão: 1.0 - 30/08/2006
       Author: Micox - Náiron J.C.G - micoxjcg@yahoo.com.br
       Site:   http://elmicox.blogspot.com
       Não retire estas informações pra não infringir direitos autorais!
       */
    var $node, $atual, $className, $retorno = new Array(), $novos = new Array();
    $retorno = new Array();
    for (var $i=0;$i<$node.childNodes.length;$i++){
       $atual = $node.childNodes[$i];
       if($atual.nodeType==1){// 1 = XML_ELEMENT_NODE
          $classeAtual = $atual.className;
          if(new RegExp("\\b"+$className+"\\b").test($classeAtual)){
             $retorno[$retorno.length] = $atual;
          }
          if($atual.childNodes.length>0){
             $novos = DOMgetElementsByClassName($atual,$className);
             if($novos.length>0){
                $retorno = $retorno.concat($novos);
             }
          }
       }
    }
    return $retorno;
    }

    function addEvent(obj, evType, fn){
       //adiciona evento, versao crossbrowser
       //retirado de http://elcio.com.br/crossbrowser/#7
       if (obj.addEventListener){
          obj.addEventListener(evType, fn, true)}
       if (obj.attachEvent){
          obj.attachEvent("on"+evType, fn)}
       }
function ativaHover(classe) {
            //ativa o hover para elementos n?o links, por causa de bug do IE
            //retirado de http://www.maujor.com/tutorial/ddownmenu-a.php
            var pais = DOMgetElementsByClassName(document.body,classe);
            for (var j=0; j<pais.length; j++) {
                        var sfEls = pais[j].getElementsByTagName("LI");
                        for (var i=0; i<sfEls.length; i++) {
                                   sfEls[i].onmouseover=function() {
                                               this.className+=" over";
                                   }
                                   sfEls[i].onmouseout=function() {
                                               this.className=this.className.replace(new RegExp(" over\\b"), "");
                                   }
                        }
            }
}

addEvent(window,"load",function () { ativaHover("menu-hh"); });


Etapa 4 - Embelezando
Prontinho. Agora você tem um menu cru. Deve estar da seguinte forma:




Um pouco feio não é mesmo? Para estilizá-lo é só você efetuar outras declarações. De preferência em outro local, sem mexer no CSS que passei na etapa 2.

Eu, por exemplo, coloquei as seguintes declarações um pouco mais abaixo no meu código CSS e ficou bonitinho:

CODE
.menu-hh { background-color: #F60; width: 520px; margin: 0 0 0 12px; height: 31px;}
  .menu-hh a { font-weight: bold; text-decoration: none; color: #000;
  padding: 0 10px; line-height: 20px;}
  .menu-hh a:hover { text-decoration: underline; background-color: #DF2800;}
  .menu-hh ul li ul { background-color: #DF2800; border: 1px solid #000; }


Com isto, finalizei meu menu. Simples não?

Como já falei no início, uma prévia do menu pode ser vista em : www.lgcom.com.br
Lembrando que este que está aí é apenas de 2 níveis.



Etapa 5 - Código todo pronto
Abaixo é só copiar, colar e editar. original.gif Bugs corrigidos. Eu havia esquecido o comentário condicional, de zerar as margens e padding aqui no código pronto e de declarar o DOCTYPE. Pode usar tranquilo

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--[if lte IE 6]>
<script>
function DOMgetElementsByClassName($node,$className){
/* Description: retorna um array com todos os elementos dentro
     de $node que possuam a classe indicada em $className
    Versão: 1.0 - 30/08/2006
    Author: Micox - Náiron J.C.G - micoxjcg@yahoo.com.br
    Site:   http://elmicox.blogspot.com
    Não retire estas informações pra não infringir direitos autorais!
*/
  var $node, $atual, $className, $retorno = new Array(), $novos = new Array();
  $retorno = new Array();
  for (var $i=0;$i<$node.childNodes.length;$i++){
   $atual = $node.childNodes[$i];
   if($atual.nodeType==1){// 1 = XML_ELEMENT_NODE
      $classeAtual = $atual.className;                              
      if(new RegExp("\\b"+$className+"\\b").test($classeAtual)){
      $retorno[$retorno.length] = $atual;
      }
      if($atual.childNodes.length>0){
      $novos = DOMgetElementsByClassName($atual,$className);
      if($novos.length>0){
     $retorno = $retorno.concat($novos);
      }
      }
   }
  }
  return $retorno;
}
function addEvent(obj, evType, fn){
  //adiciona evento, versao crossbrowser
  //retirado de http://elcio.com.br/crossbrowser/#7
  if (obj.addEventListener){
   obj.addEventListener(evType, fn, true)}
  if (obj.attachEvent){
   obj.attachEvent("on"+evType, fn)}
}
function ativaHover(classe) {
  //ativa o hover para elementos n?o links, por causa de bug do IE
  //retirado de http://www.maujor.com/tutorial/ddownmenu-a.php
  var pais = DOMgetElementsByClassName(document.body,classe);
  for (var j=0; j<pais.length; j++) {
   var sfEls = pais[j].getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
       this.className+=" over";
      }
      sfEls[i].onmouseout=function() {
       this.className=this.className.replace(new RegExp(" over\\b"), "");
      }
   }
  }
}
  
addEvent(window,"load",function () { ativaHover("menu-hh"); });
</script>
<![endif]-->
<style>
/* menu horizontal by micox */
.menu-hh { display: table; }
.menu-hh * { margin: 0; padding: 0;}
.menu-hh a { display: block; }
.menu-hh li { list-style: none; float: left; height: 1%; }
.menu-hh li ul { position: absolute; visibility: hidden; white-space: nowrap;}
/* hack para navegadores que exigem width para elementos pos absolute (Opera) */
html:first-child>body .menu-hh li ul { width: 500px; }
.menu-hh li:hover ul, .menu-hh  li.over ul { visibility: visible;} /* a class  .over eh tecnica pro hover no IE */
.menu-hh li:hover ul li ul, .menu-hh li.over ul li ul{ visibility: hidden;}
.menu-hh li ul li:hover ul, .menu-hh li ul li.over ul{ visibility: visible;}
/* visual */
.menu-hh { background-color: #F60; width: 90%; margin: 0 0 0 12px; height: 31px;}
  .menu-hh a { font-weight: bold; text-decoration: none; color: #000; padding: 0 10px; line-height: 20px;}
  .menu-hh a:hover { text-decoration: underline; background-color: #DF2800;}
  .menu-hh ul li ul { background-color: #DF2800; border: 1px solid #000; }
</style>
</head>
<body>
<div class="menu-hh">
  <ul>
    <li><a  href="quem-somos.asp">Quem somos</a></li>
    <li><a  href="produtos.asp">Produtos</a>
   <ul>
  <li><a  href="radios-portateis.asp">Rádios  portáteis</a>
     <ul>
    <li><a  href="2.htm">Sub-menu 3</a></li>
    <li><a  href="2.htm">Sub-menu 3</a></li>
    <li><a  href="2.htm">Sub-menu 3</a></li>
    <li><a  href="2.htm">Sub-menu 3</a></li>
     </ul>
   </li>
   <li><a href="radios-moveis.asp">Rádios  móveis</a></li>
   <li><a  href="repetidoras.asp">Repetidoras</a></li>
   <li><a href="sistemas-hf.asp">Sistemas  HF</a></li>
   <li><a  href="acessorios.asp">Acessórios</a></li>
   </ul>
    </li>
    <li><a  href="revendas.asp">Revendas</a>
   <ul>
   <li><a href="2.htm">Sub-menu 2</a>
     <ul>
    <li><a  href="2.htm">Sub-menu 3</a></li>
    <li><a  href="2.htm">Sub-menu 3</a></li>
    <li><a  href="2.htm">Sub-menu 3</a></li>
     </ul>
   </li>
   <li><a href="2.htm">Sub-menu  2</a></li>
   <li><a href="2.htm">Sub-menu  2</a></li>
   </ul>
    </li>
    <li><a  href="cotato.asp">Solicite uma  cotação</a></li>
    <li><a  href="assistencia-tecnica.asp">Assistência  técnica</a></li>
    <li><a  href="locacao.asp">Locação</a></li>
    <li><a  href="contato.asp">Contate-nos </a></li>
  </ul>
</div>
</body>
</html>



Fim
Aqui acaba este primeiro menu horizontal com submenus horizontais de até 3 níveis.
Caso lhe tenha sido útil, comente aqui e me incentive a continuar escrevendo mais.
Caso tenha encontrado algum bug, comente aqui e me informe para eu tentar corrigir.

Você gostou? Comente no fórum!

Comentários:

FelipeMorais disse:

Opa rapaz... Mt bom, aposto que vai ajudar muita gente!
Parabéns!

TheChessMan disse:

Muito bom micox! Agora temos um bom link para indicar!

wink.gif

Micox disse:

Estou preparando as continuações.
Menu de tudo que é jeito. Sempre em WS.

Micox disse:

Saiu o segundo menu.

Menu Horizontal, Sub-Menu Vertical

Postado inicialmente em: Menu Horizontal, Sub-Menu Vertical - Menus CSS 2

Etapa 1 - O código xHTML:

Repita o código (X)HTML postado no menu anterior. Porém o nome de classe que deverá ser utilizado é menu-hv.

Etapa 2 - O CSS:

2.1 - Adicione as declarações abaixo no seu arquivo CSS.
2.2 - Se for necessário realizar alterações pra melhorar o visual, faça fora destas declarações pra não correr o risco de "estragá-las" (a não ser que você entenda bem de CSS né?). Aguarde, mostrarei como fazer estas alterações na etapa 4.

CODE
/* menu horizontal-vertical by micox */
.menu-hv * { margin: 0; padding: 0;}
.menu-hv a { display: block; }
.menu-hv li { list-style: none; float: left; height: 1%; }
.menu-hv li ul { position: absolute; visibility: hidden;}
.menu-hv li ul li { float: none; white-space: nowrap; display: inline; /* o inline é pro IE */}
.menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
.menu-hv li:hover ul, .menu-hv li.over ul { visibility: visible;}
.menu-hv li:hover ul ul, .menu-hv li.over ul ul { visibility: hidden;}
.menu-hv ul ul li:hover ul, .menu-hv ul ul li.over ul { visibility: visible;}


Etapa 3 - Javascript pra ativar o hover no IE

3.1 - Veja as etapas do JavaScript no menu anterior.(fiz algumas pequenas alterações no menu anterior, troquei a função overMenuHH por uma mais genérica. Já editei o post inicial.)
3.2 - Para saber mais sobre o comportamento indevido do IE quanto ao ":hover", leia aqui na explicação do Maujor.
3.3 - Editado 28/11/06: Não se esqueça de colocar o comentário condicional pra que o script só funcione no IE (era um dos bugs).
3.4 - Adicione a seguinte chamada ao final do arquivo de script pra carregar o menu no IE.
CODE
addEvent(window,"load",function () { ativaHover("menu-hv"); });


Etapa 4 - Embelezando

Prontinho. Agora você tem um menu cru. Deve estar da seguinte forma:

Um pouco feio não é mesmo? Para estilizá-lo é só você efetuar outras declarações. De preferência em outro local, sem mexer no CSS que passei na etapa 2.

Eu, por exemplo, coloquei as seguintes declarações um pouco mais abaixo no meu código CSS e ficou bonitinho:

CODE
.menu-hv { background: #DF2800 url(img/bg-menu.jpg) repeat-x top;
   width: 757px; margin: 0 0 0 12px; height: 31px;}
   .menu-hv a { font-weight: bold; text-decoration: none; color: #FFF;
   padding: 0 10px; line-height: 23px;}
   .menu-hv a:hover { text-decoration: underline; background-color: #000; color: #FFF;}
   .menu-hv ul li ul { background-color: #DF2800; border: 1px solid #000; }



Com isto, finalizei meu menu. Simples não?

Como já falei no início, uma prévia do menu pode ser vista aqui.


Etapa 5 - Código inteiro pronto

Abaixo é só copiar, colar e editar. original.gif Editado 28/11/06: Bugs corrigidos. Eu havia esquecido o comentário condicional e de zerar as margens e padding aqui no código pronto. Pode usar tranquilo.

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if lte IE 6]>
<script>
function DOMgetElementsByClassName($node,$className){
/* Description: retorna um array com todos os elementos  dentro
                 de  $node que possuam a classe indicada em $className
    Versão: 1.0 -  30/08/2006
    Author: Micox -  Náiron J.C.G - micoxjcg@yahoo.com.br
    Site:   http://elmicox.blogspot.com
    Não retire estas  informações pra não infringir direitos autorais!
*/
  var $node,  $atual, $className, $retorno = new Array(), $novos = new Array();
  $retorno =  new Array();
  for (var  $i=0;$i<$node.childNodes.length;$i++){
   $atual  = $node.childNodes[$i];
   if($atual.nodeType==1){//  1 = XML_ELEMENT_NODE
   $classeAtual  = $atual.className;                              
   if(new  RegExp("\\b"+$className+"\\b").test($classeAtual)){
      $retorno[$retorno.length] = $atual;
   }
   if($atual.childNodes.length>0){
      $novos =  DOMgetElementsByClassName($atual,$className);
      if($novos.length>0){
     $retorno = $retorno.concat($novos);
      }
   }
   }
  }
  return  $retorno;
}
function addEvent(obj, evType, fn){
     //adiciona evento,  versao crossbrowser
     //retirado de  http://elcio.com.br/crossbrowser/#7
     if (obj.addEventListener){
         obj.addEventListener(evType, fn, true)}
     if (obj.attachEvent){
         obj.attachEvent("on"+evType,  fn)}
}
function ativaHover(classe) {
  //ativa o  hover para elementos n?o links, por causa de bug do IE
  //retirado  de http://www.maujor.com/tutorial/ddownmenu-a.php
  var pais =  DOMgetElementsByClassName(document.body,classe);
  for (var  j=0; j<pais.length; j++) {
   var  sfEls = pais[j].getElementsByTagName("LI");
   for  (var i=0; i<sfEls.length; i++) {
   sfEls[i].onmouseover=function()  {
    this.className+="  over";
   }
   sfEls[i].onmouseout=function()  {
    this.className=this.className.replace(new  RegExp(" over\\b"), "");
   }
   }
  }
}

addEvent(window,"load",function  () { ativaHover("menu-hv"); });
</script>
<![endif]-->
<style>
/* menu horizontal-vertical by micox */
.menu-hv * { margin: 0; padding: 0;}
.menu-hv a { display: block; }
.menu-hv li { list-style: none; float: left; height: 1%; }
.menu-hv li ul { position: absolute; visibility: hidden;}
.menu-hv li ul li { float: none; white-space: nowrap; display: inline; /* o inline é pro IE */}
.menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
.menu-hv li:hover ul, .menu-hv li.over ul { visibility: visible;}
.menu-hv li:hover ul ul, .menu-hv li.over ul ul { visibility: hidden;}
.menu-hv ul ul li:hover ul, .menu-hv ul ul li.over ul { visibility: visible;}
/* visual */
.menu-hv {  background: #DF2800 url(img/bg-menu.jpg) repeat-x top;
                                    width: 757px;  margin: 0 0 0 12px; height: 31px;}
             .menu-hv a { font-weight: bold;  text-decoration: none; color: #FFF;
                                        padding: 0 10px; line-height: 23px;}
             .menu-hv a:hover { text-decoration:  underline; background-color: #000; color: #FFF;}
             .menu-hv ul li ul {  background-color: #DF2800; border: 1px solid #000; }
</style>
</head>
<body>
<div class="menu-hv">
   <ul>
     <li><a href="quem-somos.php">Quem  somos</a></li>
     <li><a  href="produtos.php">Produtos</a>
       <ul>
         <li><a  href="radios-portateis.php">Rádios  portáteis</a>
           <ul>
              <li><a href="#">Terceiro  nível</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
           </ul>
         </li>
         <li><a  href="radios-moveis.php">Rádios  móveis</a></li>
         <li><a  href="repetidoras.php">Repetidoras</a></li>
         <li><a  href="sistemas-hf.php">Sistemas HF</a></li>
         <li><a  href="acessorios.php">Acessórios</a></li>
       </ul>
     </li>
     <li><a  href="revendas.php">Revendas</a></li>
     <li><a href="cotato.php">Solicite uma  cotação</a></li>
     <li><a  href="assistencia-tecnica.php">Assistência  técnica</a></li>
     <li><a  href="locacao.php">Locação</a></li>
     <li><a href="contato.php">Contate-nos  </a></li>
   </ul>
</div>
</body>
</html>



Fim

Aqui acaba este segundo Menu Horizontal com Submenus Verticais de até 3 níveis.
Caso lhe tenha sido útil, comente aqui e me incentive a continuar escrevendo mais.
Caso tenha encontrado algum bug, comente aqui e me informe para eu tentar corrigir.
Caso tenha dúvidas, pergunte no fórum de Webstandards / Tableless / CSS .

Até o próximo menu pessoal.

Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).

Mais recentes em WebStandards e CSS

Mini-lib css reset do micox
Por Micox - Abaixo mostrarei tipo uma mini-lib css com o qual eu...
Mapear regiao
Por faro - Substituindo a tag map pelo css....
Layout diferente.
Por faro - Boa noite pessoal como vão todos... esse é meu primeiro...
Rollover via css
Por NightSpy - Achei este efeito na net, como não achei novamente,...
Menu drop-down só com css - até 4 níveis
Por Micox - Código pronto - só copiar, colar e usar...

Ver mais Artigos de WebStandards e CSS.

Ver e retirar outras dúvidas no fórum Webly.

Alguns Direitos Reservados | RSS | O Fórum

Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com