Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Como faço um menu deste jeito?+ Menu 1+ Menu 2+ Menu 3Quando clicar em cima do + do Menu 1 ficaria assim- Menu 1 + Sub menu 1 + Sub menu 2 + Sub menu 2+ Menu 2Quando clicar no + do Sub Menu 1 ficariia assim..- Menu 1 - Sub menu 1 Sub Sub Menu 1 Sub Sub Menu 2 Sub Sub Menu 3 + Sub Menu 2 + Sub Menu 3+ Menu 2Obrigado pela ajuda!!!
kra Marcinha...Se estou perguntando é porque ja pesquisei....Menu arvore... serviria se funciona-se nos dois navegadores.. IE e FireFoxEntão se você sabe o link coloca ai... que assim posso estudar o codigo... caso contrario não fique falando que não procurei pq procurei...Mas pode deixar que eu vou pesquizar no Google... tipo tava pedindo a ajuda aqui ... pq ja ajudei bastante gente em PHP... mas beleza...Espero não ter sido grosseiro.. e nem ter ocupado muito tempo seu...T + GATA
Eu perguntei se você já havia pesquisado pois é muito comum o pessoal fazer perguntas antes de pesquisar, fique calmo!
Veja este código que encontrei:
<?xml version="1.0" encoding="ISO-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">](http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd) <style> ul.treelist{ font-family: Tahoma,sans; font-size: 11px; vertical-align: middle; } ul.treelist{ margin:0; padding:0 0 0 0px; } ul.treelist li{ margin:0; padding:0 0 0 15px; list-style-type:none; } ul.treelist li{ /* background-image:url(image/menos.gif);*/ background-position:1px 2px; background-repeat:no-repeat; position: static; line-height:15px; } li ul.treelist{ margin: 0px; padding-right: 0px; position: relative; } ul.treelist li.fechado{ background-image:url(mais.gif); } ul.treelist li.aberto{ background-image:url(menos.gif); } ul.treelist li a{ color:#009; } ul.treelist li a:hover{ color:#F00; } ul.treelist li.aberto ul{ display:block; } ul.treelist li.fechado ul{ display:none; } </style> <script> // Atribuição de eventos function inittree(){ var uls=document.getElementsByTagName("ul") for(i=0;i<uls.length;i++) if(uls[i].className=="treelist"){ var lis=uls[i].childNodes for(ii=0;ii<lis.length;ii++) if(lis[ii].nodeType==1) if(lis[ii].getElementsByTagName("ul").length>0){ lis[ii].className="fechado" chi=lis[ii].childNodes addEvent(lis[ii].childNodes[0],"click",clicado) } } } // Abre/fecha quando clicado function clicado(e){ var source=getSource(e) var li=source.parentNode li.className=li.className=="fechado"?"aberto":"fechado" return false } function addEvent(obj, evType, fn){ if(obj.addEventListener)obj.addEventListener(evType,fn,true) if(obj.attachEvent)obj.attachEvent("on"+evType,fn) } function getSource(e){ if(typeof e=='undefined')var e=window.event; var source=typeof e.target!='undefined'?e.target:typeof e.srcElement!='undefined'?e.srcElement:true if(source.nodeType == 3)source=source.parentNode; return source } </script> <title>Exemplo de Tree Menu</title></head><body onload="inittree();"> <div> <ul class="treelist"> <li><a href="#">itens 1</a> <ul class="treelist"> <li><a href="#">itens 1.1</a> <ul class="treelist"> <li><a href="#">itens 3</a> <ul class="treelist"> <li><a href="#">itens 3.1</a></li> <li><a href="#">itens 3.2</a></li> <li><a href="#">itens 3.3</a></li> <li><a href="#">itens 3.4</a></li> </ul> </li> <li><a href="#">teste itens 1.1.1</a></li> <li><a href="#">teste itens 1.1.2</a></li> <li><a href="#">teste itens 1.1.3</a></li> </ul> </li> <li><a href="#">itens 1.1</a> <ul class="treelist"> <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.9</a> <ul class="treelist"> <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.1</a> <ul class="treelist"> <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 class="treelist"> <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> <li><a href="#">itens 3</a> <ul class="treelist"> <li><a href="#">itens 3.1</a></li> <li><a href="#">itens 3.2</a></li> <li><a href="#">itens 3.3</a></li> <li><a href="#">itens 3.4</a></li> </ul> </li> </ul> </div></body></html>Ele pode ser melhorado, mas tou mei sem tempo aqui.. =/
Ah, tem um outro tipo aqui tbm:
http://www.imasters.com.br/dica/8
Espero ter te ajudado! :)
Aeee.. Macinha.. este codigo ai ja serviu p/ oque eu queria...Obrigado... Gatinha... e me desculpe por qualquer transtorno que eu tenha te causado...Bjs e Abraços...
Outro menu no 1o tópico do Dúvidas frequentes (que tá pendurado):
http://forum.imasters.com.br/index.php?showtopic=175869
Talvez a busca que fez não foi muito boa...
Boa noite Galera, no laboratorio de scripts tem este menu abaixo postado por marcinhha, porem fiz uma versão dinâmica que não ta rolando vou postar abaixo deste coidgo como esta trazendo as informações...
Tenho uma tabela de categoria, e uma de sub categorias, uma sub categoria pode ter uma categoria e uma categoria pode ter varias subcategoria, só que tenho que listar isso fiz assim
enquando não for o fim
conta se tem sub-categoria para categoria atual
imprime categoria
se tem sub categoria imprime se não tem voi para o fim
enquando categoria atual for igual a proxima
aqui ele vai movendo o registro na tabela de subcategoria e compara se a categoria dele é igual a que estamos imprimindo.
imprime sub categoria até for diferente a categoria
fim enquanto
fim enquando
porem não ta funfando... não sei porque segue abaixo o cogido... abraços....
<%'Cabeçalho da paginaSet conexao = Server.CreateObject("ADODB.Connection")conexao.Open "Provider=Microsoft.Jet.OleDB.4.0;Data Source=" & Server.MapPath("db/cat_online.mdb")%><?xml version="1.0" encoding="ISO-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Consegui fazer ele funcionar mais ou menos mas não cosigo fazer com que funcione as imagens dos botões mais e botões menosquando espandir ficar menos, quando tiver fechado mais...
Kra, tem tanto tópico sobre menus de vários tipos.. árvores, drop down, etc etcO que você acha de fazer uma busca pelo conteúdo específico que você quer? Caso você não encontre, retorne aqui, mas tenho certeza que encontrará! ;)