Jump to content


Felipe's Content

There have been 1 items by Felipe (Search limited from 22/02/2019)


Ordernar por                Order  

#989076 Menu Cascata

Posted by Felipe on 05/12/2009, 13:41 in HTML, CSS e Metodologias

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

Posted Image

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>




IPB Skin By Virteq