Menu Cascata

#1 Felipe

Ativo

Usuários
350 posts

Sexo:Masculino

Posted 05/12/2009, 13:41

Gostaria de saber onde encontro um script para um menu em cascata no estilo das imagens abaixo.

Posted Image

Estou usando esse código simples abaixo, só que não é nada parecido com o das imagens....falta o fundo preto e o formato em tabela.

<head><style>/* fazendo a estilização visual via CSS */ li { list-style: square } .aberto{ display:block; } .paiaberto{ list-style: circle; list-style-image: url(folderopen.gif); } /* espaçamento pro IE */ * html .paiaberto { padding-left: 5px; } .fechado{ display:none; border: 1px solid gray } .paifechado{ list-style: disc; list-style-image: url(folderclosed.gif); } /* espaçamento pro IE */ * html .paifechado { padding-left: 7px;}</style><script>/* atalho para o getElementById */function ge(q){ return document.getElementById(q)}function Menu(evt,id) { /* função que muda a classe CSS dos elementos da lista de forma a abrir e fechar a árvore */ if(typeof(evt)=='undefined')var evt=window.event //pegando o li pai do link var lipai = id.parentNode; //pegando o primeiro ul var ulfilho = id.parentNode.getElementsByTagName ("ul")[0];  if(ulfilho.className.indexOf('aberto')<0 && ulfilho.className.indexOf('fechado')<0){ //definindo um estado inicial caso nao haja ulfilho.className = ulfilho.className + " aberto"; } if(lipai.className.indexOf('paiaberto')<0 && lipai.className.indexOf('paifechado')<0){ //definindo um estado inicial caso nao haja lipai.className = lipai.className + " paiaberto"; } //fazendo a troca if(ulfilho.className.indexOf('aberto')>-1){ ulfilho.className = ulfilho.className.replace("aberto","fechado"); }else{ ulfilho.className = ulfilho.className.replace("fechado","aberto"); } //mudando a imagem do li pai if(lipai.className.indexOf('paiaberto')>-1){ lipai.className = lipai.className.replace("paiaberto","paifechado"); }else{ lipai.className = lipai.className.replace("paifechado","paiaberto"); } if(typeof(evt.preventDefault)=='undefined'){ evt.returnValue = false; }else{ evt.preventDefault() } return false;}function ativaMenus(ul_pai){/* função que ativa os menus */ if(ul_pai.constructor == String) ul_pai = ge(ul_pai) //ativando os cliques var links = ul_pai.getElementsByTagName("a"); for (var i=0; i < links.length ; i++){ //vendo se é link que está dentro de um li com filhos if(links[i].parentNode.getElementsByTagName("ul").length>0){ links[i].onclick = function(ev){ Menu(ev,this) } } }  //fechando todos os li var lis = ul_pai.getElementsByTagName("li"); for (var i=0; i < lis.length ; i++){ if(lis[i].getElementsByTagName("ul").length>0){ lis[i].className += " paifechado"; //fechando todos inicialmente  }} //fechando todos os ul inicialment var uls = ul_pai.getElementsByTagName("ul"); for (var i=0; i < uls.length ; i++){ uls[i].className += " fechado"; }}//abaixo eu chamo a função pra ativar os menus, passando como parametro o ID do ul que é pai dos menus.window.onload = function() { ativaMenus('menuteste') }</script></head><body> <ul id="menuteste"> <li><a href="#">itens 1</a> <ul> <li><a href="#">itens 1.1</a> <ul> <li><a href="#">itens 1.1.1 </a></li> <li><a href="">itens 1.1.2</a></li> <li><a href="">itens 1.1.3</a></li> </ul> </li> <li><a href="">itens 1.2</a></li> <li><a href="">itens 1.3</a></li> <li><a href="">itens 1.4</a></li> </ul> </li> <li><a href="#">itens 2</a> <ul> <li><a href="#">itens 2.1</a></li> <li><a href="">itens 2.2</a></li> <li><a href="">itens 2.3</a></li> <li><a href="">itens 2.4</a></li> </ul> </li> </ul></body>

Edição feita por: Victor Hugo Odo, 06/12/2009, 21:20.
Para facilitar a leitura do código, usa-se codebox ao invés de quote.

#2 brunoXP

EFEI EÔ

Conselheiros
2226 posts

Sexo:Masculino
Localidade:Campinas/Itajubá

Posted 05/12/2009, 16:46

Alguns exemplos de tutoriais sobre menus em cascata:
http://jaderubini.wo...ata-com-jquery/
http://elmicox.blogs...mo-queiram.html
http://www.dynamicdr...eview/index.htm
http://www.ilovecolo...u-using-jquery/
http://www.dynamicdr...1/navigate1.htm

Abracos,

Bruno Toffolo
· Conselho / WebFórum

#3 Pottizudo

Novato no fórum

Usuários
6 posts

Sexo:Não informado

Posted 08/12/2009, 03:13

Vou lhe mandar um:

JAVASCRIPT:

function vertical() { 

   var navItems = document.getElementById("nav").getElementsByTagName("li"); 
    
   for (var i=0; i< navItems.length; i++) { 
      if(navItems[i].className == "submenu") { 
         navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";} 
         navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";} 
      } 
   } 

}

CSS:

ul.menubar 
{ 
   margin: 0px; 
   padding: 0px; 
   background-color: #FFFFFF; /* IE6 Bug */ 
   font-size: 100%; 
   } 

ul.menubar .menuvertical 
{ 
   margin: 0px; 
     padding: 0px; 
     list-style: none; 
     background-color: #FFFFFF; 
   border: 1px solid #ccc; 
   float:left; 
} 

ul.menubar ul.menu 
{ 
   display: none; 
   position: absolute; 
   margin: 0px; 
   background: #000;
} 

ul.menubar a 
{ 
   padding: 5px; 
   display:block; 
   text-decoration: none; 
   color: #777; 
   padding: 5px; 
} 


ul.menu, 
ul.menu ul 
{ 
   margin: 0; 
   padding: 0; 
   border-bottom: 1px solid #ccc; 
   width: 150px; /* Width of Menu Items */ 
   background-color: #FFFFFF; /* IE6 Bug */ 
} 

ul.menu li 
{ 
   position: relative; 
   list-style: none; 
   border: 0px; 
} 

ul.menu li a 
{ 
   display: block; 
   text-decoration: none; 
   background-image: url(../item_menu.gif);
   border-bottom: 0px; 
   color: #777; 
   padding: 5px 10px 5px 5px; 
} 

/* Fix IE. Hide from IE Mac \*/ 
* html ul.menu li { float: left; height: 1%; } 
* html ul.menu li a { height: 1%; } 
/* End */ 

ul.menu ul 
{ 
   position: absolute; 
   display: none; 
   left: 149px; /* Set 1px less than menu width */ 
   top: 0px; 
} 

ul.menu li.submenu ul { display: none; } /* Hide sub-menus initially */ 

ul.menu li.submenu { background: transparent url(arrow.gif) right center no-repeat; } 

ul.menu li a:hover { color: #E2144A; }

Lembre-se de colocar o código mais importante:

<body onload="vertical();horizontal();">

HTML:

<ul id="nav" class="menu"> 
  <li><a href="#">Home</a></li> 

  <li class="submenu"><a href="#">About</a> 
    <ul> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</a></li> 
    </ul> 
  </li> 

  <li class="submenu"><a href="#">Services</a> 
    <ul> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">Internet Marketing</a></li> 
      <li class="meucu"><a href="#">Hosting</a> 
        <ul> 
          <li><a href="#">Dedicated</a></li> 

          <li class="submenu"><a href="#">Virtual</a> 
         <ul> 
            <li><a href="#">United Kingdom</a></li> 
            <li><a href="#">France</a></li> 
            <li><a href="#">USA</a></li> 
       
            <li><a href="#">Australia</a></li> 
          </ul> 
        </li> 
          <li><a href="#">Shared</a></li> 
          <li><a href="#">Managed</a></li> 
        </ul> 
      </li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 

    </ul> 
  </li> 
  <li class="submenu"><a href="#">Contact Us</a> 
    <ul> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 

      <li><a href="#">Australi</a></li> 
    </ul> 
  </li> 
</ul>

Edite no css, se quiser alterar hover, altere no javascript:

navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";} 
         navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";}

Boa sorte! espero ter ajudado.

Formado em desenvolvimento. HTML + CSS + JAVASCRIPT
"Fuçador" de PHP e SQL.