com menu expandivel....

rsddaros · Junho 5, 2006

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!!!

marcinhha · Junho 5, 2006

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á! ;)

rsddaros · Junho 5, 2006

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

marcinhha · Junho 6, 2006

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"><html><head>   <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! :)

rsddaros · Junho 6, 2006

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

micox · Junho 6, 2006

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

filipescoob · Junho 8, 2006

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

Codigo Original Statico

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"><html><%	  set rs_categsub = Server.CreateObject("adodb.Recordset")	  SQL = "Select cod_categ as cod, nome_categ as nomecateg from tbl_categoria order by cod_categ"		  set rs_categsub = conexao.execute(SQL)	  		set rs_sub = Server.CreateObject("adodb.Recordset")	  ssSQL = "Select cod_sub_categ  as codsub, nome_sub_categ as nomesubcateg, cod_categ_ as cod1 from tbl_sub_categ order by cod_categ_"		  set rs_sub = conexao.execute(ssSQL)	  %><head>   <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(imagem_ok/sinal_menos.jpg);		 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(imagem_ok/sinal_mais.jpg);	  }	  ul.treelist li.aberto{		 background-image: url(imagem_ok/sinal_menos.jpg);	  }	  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>	  <%  while not rs_categsub.eof					  set rs_total = Server.CreateObject("adodb.Recordset")					  SQL_T = "Select count(a.cod_sub_categ) as totals from tbl_sub_categ a, tbl_categoria c where a.cod_categ_ ="&rs_categsub("cod")						  set rs_total = conexao.execute(SQL_T)					  tota = rs_total("totals")					  tota = cint(tota)		%>		<ul class="treelist">		<%		if tota = 0 then				%>		<li><a href="ver.asp?id=<%=rs_categsub("cod")%>" target="mainpic"><%response.write rs_categsub("nomecateg") %></a>		<%		else if tota > 0 then		%>				<li><a href="#" target="mainpic"><%response.write rs_categsub("nomecateg") %></a>		 <ul class="treelist">		<% 		'move registro para o primeiro novamente		rs_sub.movefirst		'imprime todas categorias		'atualiza o atual		atual = cint(rs_categsub("cod"))		'checa sub categorias		while not rs_sub.eof		if cint(rs_sub("cod1")) = atual then 			'imprime subscategorias			session("id") =  rs_categsub("cod")			response.write " <li>          <a class="" href='ver_sub.asp?id=" & rs_sub("codsub") & "&cat=" & rs_categsub("cod") & "' target='mainpic'>"&rs_sub("nomesubcateg")&"</a></li>"		end if		'movesubtotal		rs_sub.Movenext		wend	%>	  </ul>   </li><%	end if%> 	</li><%  end if  rs_categsub.MoveNext %>  </ul> <%  wend%>			</div></body></html>

filipescoob · Junho 9, 2006

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

Arquivado

com menu expandivel....

Recommended Posts

rsddaros 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcinhha 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rsddaros 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcinhha 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rsddaros 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

filipescoob 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

filipescoob 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Não consigo carregar imagem do captcha no meu formulário

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Fóruns

Tempo Real

Informação importante