Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

alicacwb

menu de js.. (fácil e dificil

Por , em Javascript

Recommended Posts

alicacwb    0

alicacwb
Postado

Olá pessoal... tem um script que eu to precisando... eh o seguinte...

 

Tenho um site que possui menus. (óbvio) ;) e esses menus tem subitens...

Preciso de um script que quando eu clique, ele abra uma td da tabela, e qdo eu clique em outro item, ele feche o td abreto, e abra o que eu cliquei......

 

Obs.: eu tenho somente o script que abre a td, e se clicar denovo, ela fecha, mas nao sei como incluir o novo evento... Segue abaixo o codigo que eu uso.... (nao precisa ser necessariamente o mesmo código

 

<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><table width="100%" border="0" cellspacing="0" cellpadding="0">  <tr onclick="javascript:if (document.all){if (conteudo.style.display=='none'){conteudo.style.display='block'}else{conteudo.style.display='none'}}" style='cursor:hand;'>    <td>Clique aqui !!!!</td>  </tr>  <tr>    <td><script language='javascript'>if (document.all){document.write('<div id=conteudo style=display:none;>')}</script>aaaa	ddddd  <script language='javascript'>if (document.all){document.write('</div>')}</script></td>  </tr>  <tr onclick="javascript:if (document.all){if (conteudo2.style.display=='none'){conteudo2.style.display='block'}else{conteudo2.style.display='none'}}" style='cursor:hand;'>    <td>Clique aqui tbm...</td>  </tr>  <tr>    <td><script language='javascript'>if (document.all){document.write('<div id=conteudo2 style=display:none;>')}</script>      fasfasdsadafadf    <script language='javascript'>if (document.all){document.write('</div>')}</script></td>  </tr></table><br><br><br>Gostaria que qdo eu clicasse no clique aqui tbm... (com o Clioque aqui!!! aberto)fechasse o primeiro, e só daí abrisse o segundo.... </body></html>

Valeu galera...

 

Alica CWB

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

<html><title>JavaScript - Menu</title>

<head>

<script language=javascript>

itens = new Array();

subitens = new Array();

 

itens[1] = "item 1";

itens[2] = "item 2";

subitens[1] = "subitem 1 A|subitem 1 B";

subitens[2] = "subitem 2 A|subitem 2 B";

 

aux = 0;

function teste(n){

 if(aux==n){

  e = document.all["item"+n];

  e.innerHTML = "";

 }else{

  if(aux!=0){

   e = document.all["item"+aux];

   e.innerHTML = "";

  }

  aux = n;

  e = document.all["item"+n];

  retornar = "";

  vetor = subitens[n].split("|");

   for(i=0;i<vetor.length;i++){

   retornar += "<br> - " + vetor;

   }

  e.innerHTML = retornar;

 }

}

</script>

</head>

<body bgcolor=ffffff text=000000>

 

<table border=0 cellspacing=0 cellpadding=0>

<script language=javascript>

for(i=1;i<itens.length;i++){

document.write("<tr><td><a href=\"java script:;\" onclick=\"teste("+i+");\">"+itens+"</a><span name=item"+i+" id=item"+i+"></span></td></tr>");

}

</script>

</table>

 

</body></html>

em azul onde você adiciona os itens e subitens

se por exemplo quiser o item 3 com 5 subitens adicione:

 

itens[3] = "item 3";

subitens[3] = "subitem 3 A|subitem 3 B|subitem 3 C|subitem 3 D|subitem 3 E";

Compartilhar este post

Link para o post
Compartilhar em outros sites

alicacwb    0

alicacwb
Postado

himon,muitissimo obrigada, era exatamente isso que eu procurava, só que tem um pequeno "bug"...se eu abrir o item 1, fechar o item 1, e tentar abrir denovo ele (tudo em sequencia), ele nao abre... :blink: Será que eh facil de resolver isso ???Alica CWB

Compartilhar este post

Link para o post
Compartilhar em outros sites

alicacwb    0

alicacwb
Postado

himon...

 

Como que eu faço pra colocar o link nos submenus ?? Tentei isso mas nao deu certo...

itens[1] = "<strong>• Administrativo</strong>";itens[2] = "<strong>• Gerenciamento</strong>";itens[3] = "<strong>• Documento</strong>";subitens[1] = "<a href=\"#\"• Categoria</a><a href=\"#\"  • Fornecedores</a><a href=\"#\"  • Interno</a>";subitens[2] = "<a href=\"#\"• Categoria</a><a href=\"#\"  • Fornecedores</a><a href=\"#\"  • Interno</a>";subitens[3] = "• Grupo/• Disciplina/• Conjunto";subitens[4] = "• Usuário/• Tipo de documento";

Como que eu faço pra que ao inves de abrir pra baixo, abra pro lado, e para as opçoes ficarem uma do lado da outra tbm ???

 

Alica CWB

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

nesse trecho do código, adicione a parte em negrito:

...

function teste(n){

  if(aux==n){

   e = document.all["item"+n];

   e.innerHTML = "";

   aux = 0;

  }else{

...

quanto a adicionar link:

itens[1] = "<strong>• Administrativo</strong>";	itens[2] = "<strong>• Gerenciamento</strong>";	itens[3] = "<strong>• Documento</strong>";	subitens[1] = "  <a href=\"#\">• Categoria</a>|  <a href=\"#\">• Fornecedores</a>|  <a href=\"#\">• Interno</a>";	subitens[2] = "  <a href=\"#\">• Categoria</a>|  <a href=\"#\">• Fornecedores</a>|  <a href=\"#\">• Interno</a>";	subitens[3] = "  • Grupo|  • Disciplina|  • Conjunto";
você esqueceu de fechar a tag <a href> por isso ficava vazio

 

a outra dúvida não entendi muito bem, tem como explicar melhor ou mostrar um exemplo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

alicacwb    0

alicacwb
Postado

himon....

 

- eu gostaria que os titulos do menu, ficasse um do lado do outro, ou seja, na mesma tr... segue abaixo o meu código,,

 

<html><head><title>A1DOC - Gerenciamento de Documentos On-line</title><?php include ("padrao.css") ?><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body bgcolor="#006699" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><table width="994" border="0" align="center" cellpadding="0" cellspacing="0">  <tr>    <td><table width="100%" border="0" cellspacing="0" cellpadding="3" class="conteudo">      <tr align="center">        <td colspan="4"><font size="4"><strong>A1DOC Gerenciamento de Documentos              Online</strong></font></td>      </tr>      <tr align="center">          <td width="77%" align="left">Logado como: <strong><?php echo "$nome - $group"; ?></strong></td>        <td width="11%" colspan="-3" align="right"><?php echo date("d/m/Y"); ?></td>        <td width="6%" align="right"><a href="ajuda.php" target="_blank" class="menulink">Sobre</a></td>        <td width="6%" align="right"><a href="logoff.php?sc=<?php echo $sc; ?>" target="_top" class="menulink">LogOff</a></td>      </tr>      <tr align="center">        <td height="9" align="left"></td>        </tr>    </table>      <table width="100%" border="0" cellpadding="0" cellspacing="0" class="conteudo">        <tr>          <td colspan="11" align="left" valign="bottom" bgcolor="#006699"></td>        </tr>        <tr>          <td width="6" align="left" bgcolor="#006699"><img src="img/menu_sep4.gif" width="6" height="20" border="0"></td>          <td width="90" align="center" valign="top"><img src="img/line_white.gif" width="100%" height="1" align="texttop"><a href="index_frame.php?sc=<?php echo $sc; ?>" target="_top" class="menulink">Home</a></td>          <td width="11" align="right"><img src="img/menu_sep3.gif" width="11" height="20" border="0"></td>          <td width="90" align="center" valign="top"><img src="img/line_white.gif" width="100%" height="1" align="texttop"><a href="menu_cad.php?sc=<?php echo $sc; ?>" class="menulink">Cadastro</a></td>          <td width="11" valign="top"><img src="img/menu_sep.gif" width="11" height="20" border="0"></td>          <td width="90" align="center" valign="top" bgcolor="#0099CC"><img src="img/line_white.gif" width="100%" height="1" align="texttop">Trâmite</td>          <td width="11" align="left" bgcolor="#006699"><img src="img/menu_sep2.gif" width="11" height="20" border="0"></td>          <td width="90" align="center" valign="top"><img src="img/line_white.gif" width="100%" height="1" align="texttop"><a href="pesq_frame.php?sc=<?php echo $sc; ?>" target="_top" class="menulink">Pesquisa</a></td>          <td width="11" align="left" bgcolor="#006699"><img src="img/menu_sep3.gif" width="11" height="20" border="0"></td>          <td width="90" align="center" valign="top"><img src="img/line_white.gif" width="100%" height="1" align="texttop"><a href="menu_rel.php?sc=<?php echo $sc; ?>" class="menulink">Relatórios</a></td>          <td width="499"><img src="img/menu_sep5.gif" width="6" height="20" border="0"></td>        </tr>      </table>      <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#0099CC">        <tr>          <td width="12%"><a href="aprovar_etapa_1.php?sc=<?php echo $sc; ?>" target="mainFrame" class="menulink"><strong>• Aprovação</strong></a></td>          <td width="12%"><a href="solicitacao_etapa_1.php?sc=<?php echo $sc; ?>" target="mainFrame" class="menulink"><strong>• Solicitação</strong></a></td>          <td width="76%"><a href="devolver_etapa_1.php?sc=<?php echo $sc; ?>" target="mainFrame" class="menulink"><strong>• Devolução</strong></a></td>        </tr>      </table></td>  </tr></table></body></html>
itens = new Array();subitens = new Array();itens[1] = "<strong>• Administrativo</strong>";itens[2] = "<strong>• Gerenciamento</strong>";itens[3] = "<strong>• Documento</strong>";subitens[1] = "<a href=\"manut_categorias.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"menulink\">• Categoria</a>  <a href=\"manut_menus.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"menulink\">• Menu</a>  <a href=\"manut_groups.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"menulink\">• Grupo</a>  <a href=\"manut_users.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"menulink\">• Usuário</a>";subitens[2] = "<a href=\"#\" target=\"mainFrame\" class=\"menulink\">• Fornecedores</a>  <a href=\"#\" target=\"mainFrame\" class=\"menulink\">• Departamentos</a>  <a href=\"#\" target=\"mainFrame\" class=\"menulink\">• Disciplinas</a>  <a href=\"#\" target=\"mainFrame\" class=\"menulink\">• Tipos de documentos</a>";subitens[3] = "<a href=\"#\" target=\"mainFrame\" class=\"menulink\">• Interno</a>  <a href=\"#\" target=\"mainFrame\" class=\"menulink\">• Externo</a>  <a href=\"#\" target=\"mainFrame\" class=\"menulink\">• Conjunto</a>";aux = 0;function teste(n){  if(aux==n){   e = document.all["item"+n];   e.innerHTML = "";   aux = 0; }else{  if(aux!=0){   e = document.all["item"+aux];   e.innerHTML = "";  }  aux = n;  e = document.all["item"+n];  retornar = "";  vetor = subitens[n].split("|");   for(i=0;i<vetor.length;i++){   retornar += "" + vetor[i];   }  e.innerHTML = retornar; }}

Obrigada por tudo...

 

Alica CWB

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

no corpo do HTML troque por isso:

 

<table border=0 cellspacing=0 cellpadding=0><tr><script language=javascript>	for(i=1;i<itens.length;i++){  if(i>1){  document.write("<td width=10></td>");  }  document.write("<td valign=top><a href=\"javascript:;\" onclick=\"teste("+i+");\">"+itens[i]+"</a><span name=item"+i+" id=item"+i+"></span></td>");	}</script></tr></table>

Compartilhar este post

Link para o post
Compartilhar em outros sites

alicacwb    0

alicacwb
Postado

himon...

 

To precisando da sua ajuda denovo....

Nesse codigo aí embaixo, como que eu posso fazer pra que os subitens sejam exibidos numa nova <tr>? Tentei no script qdo tem retornar"<br>" substitui pra <tr></tr> mas nao deu certo... como que eu posso fazer ???

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>A1 Engenharia e Gerenciamento</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="JavaScript" src="../js/img_rollover.js" type="text/JavaScript"></script><script language="JavaScript" src="../js/menu_layers.js" type="text/JavaScript"></script><script language="JavaScript" type="text/javascript">itens = new Array();subitens = new Array();itens[1] = "<strong>• Administrativo ></strong>";itens[2] = "<strong>• Gerenciamento</strong>";itens[3] = "<strong>• Documento</strong>";subitens[1] = "<a href=\"manut_categorias.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">Categoria</a>  <a href=\"manut_menus.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">Menu</a>  <a href=\"manut_groups.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">Grupo</a>  <a href=\"manut_users.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">Usuário</a>";subitens[2] = "<a href=\"fornecedor.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">• Fornecedores</a>  <a href=\"departamento.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">• Departamentos</a>  <a href=\"disciplina.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">• Disciplinas</a>  <a href=\"tipo_documento.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">• Tipos de documentos</a>";subitens[3] = "<a href=\"cad_int_etapa_1.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">• Interno</a>  <a href=\"cad_ext_etapa_1.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">• Externo</a>  <a href=\"conjunto_etapa_1.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">• Conjunto</a>";aux = 0;function teste(n){  if(aux==n){   e = document.all["item"+n];   e.innerHTML = "";   aux = 0; }else{  if(aux!=0){   e = document.all["item"+aux];   e.innerHTML = "";  }  aux = n;  e = document.all["item"+n];  retornar = "  ";  vetor = subitens[n].split("|");   for(i=0;i<vetor.length;i++){   retornar += "<br> -->" + vetor[i];   }  e.innerHTML = retornar; }}</script><link href="../padrao.css" rel="stylesheet" type="text/css"><body background="../images/fundo.gif" text="#000000" link="#000000" vlink="#000000" alink="#666666" leftmargin="5" topmargin="5" marginwidth="5" marginheight="5" onLoad="MM_preloadImages('../images/preview_press.gif','../images/preview_next.gif')"><table width="962" border="0" cellpadding="0" cellspacing="0" id="menu">  <tr>    <td width="129" align="left" valign="middle"><img src="../images/logo_fig_menu_intra.gif" width="114" height="69"></td>    <td width="340" align="left" valign="middle"><img src="../images/logo_tex_intra.gif" width="153" height="34"></td>    <td width="493" height="69" align="center" valign="bottom" background="../images/a1net_fundo_intra.gif"><div id="a1net" style="position:absolute; width:59px; height:8px; z-index:14; left: 723px; top: 16px;"><img src="../images/a1net.gif" width="117" height="37"></div>      <div id="data" style="position:absolute; width:98px; height:8px; z-index:14; left: 855px; top: 11px;">        <table width="100%" border="0" cellspacing="0" cellpadding="0">          <tr>            <td height="22" align="center"><strong><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><?php echo date("d/m/Y"); ?></font></strong></td>          </tr>          <tr>            <td height="18" align="center" valign="bottom"><a href="logoff.php<?php echo "?sc=$sc"; ?>" class="mm2"><font color="#990000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>Efetuar Log off</strong></font></a></td>          </tr>        </table>      </div>      <div id="boasvindas" style="position:absolute; width:241px; height:15px; z-index:2; left: 510px; top: 59px;">        <div align="left"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>          <?php switch (date("H")) {	case (date("H") >= 06) and (date("H") < 12):  print "Bom dia ";	break;	case (date("H") >= 12) and (date("H") < 18):  print "Boa tarde ";	break;	default:  print "Boa noite ";	break;}echo "$nome";?>        </strong></font></div>    </div></td>  </tr></table><table width="962px" border="0" cellpadding="0" cellspacing="0" bgcolor="#CC9933">  <tr>    <td>  <table width="962" border="0" cellpadding="0" cellspacing="1" class="textmenu">        <tr align="center">          <td width="18"><a href="index_intra.php?<?php echo "sc=$sc"; ?>"><img src="../images/casa.gif" width="18" height="18" border="0" align="middle"></a></td>            <td><script language="javascript">for(i=1;i<itens.length;i++){ document.write("<td bgcolor=\"#FFFFFF\"><a href=\"javascript:;\" onclick=\"teste("+i+");\" class=\"textmenu\">"+itens[i]+"</a><span name=item"+i+" id=item"+i+"></span></td>");}</script></td>          </tr>      </table>    </td>  </tr></table></body></html>

Alica CWB

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

desculpe, na primeira resposta esqueci de explicar:

 

itens[1] = "item 1";

itens[2] = "item 2";

subitens[1] = "subitem 1 A|subitem 1 B";

subitens[2] = "subitem 2 A|subitem 2 B";

 

 

cada ítem de subítem deve ser separado por um caracter identificador, no caso |

 

subitens[1] = "subitem 1 A|subitem 1 B";

subitens[2] = "subitem 2 A|subitem 2 B";

 

 

veja como fica o seu script:

 

subitens[1] = "<a href=\"manut_categorias.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">Categoria</a>|  <a href=\"manut_menus.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">Menu</a>|  <a href=\"manut_groups.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">Grupo</a>|  <a href=\"manut_users.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">Usuário</a>";subitens[2] = "<a href=\"fornecedor.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">• Fornecedores</a>|  <a href=\"departamento.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">• Departamentos</a>|  <a href=\"disciplina.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">• Disciplinas</a>|  <a href=\"tipo_documento.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">• Tipos de documentos</a>";subitens[3] = "<a href=\"cad_int_etapa_1.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">• Interno</a>|  <a href=\"cad_ext_etapa_1.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">• Externo</a>|  <a href=\"conjunto_etapa_1.php?sc=<?php echo $sc; ?>\" target=\"mainFrame\" class=\"decorlink\">• Conjunto</a>";
troque apenas o trecho dos subitens

blzinha ??

Compartilhar este post

Link para o post
Compartilhar em outros sites

alicacwb    0

alicacwb
Postado

Obrigada himon...

 

O problema ja foi resolvido... no html ficou assim...

<table width="962" border="0" cellpadding="0" cellspacing="0" bgcolor="#CC9933">  <tr>    <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="textmenu">      <tr align="center">        <td width="18"><a href="index_intra.php?<?php echo "sc=$sc"; ?>" target="cont"><img src="../images/casa.gif" width="18" height="18" border="0" align="middle"></a></td>        <td>          <table border="0" cellspacing="1" cellpadding="0" width="100%" height="20" class="textmenu">            <tr align="center">              <script language="javascript">     	 for(i=1;i<itens.length;i++){        document.write("<td bgcolor=\"#FFFFFF\" onclick=\"javascript:style.background=\'#F5ECE2\'\"\"><a href=\"javascript:;\" onclick=\"teste("+i+");\"javascript:style.background=\'#F5ECE2\'\"\" class=\"textmenu\">"+itens[i]+"</a></td>");     	 } 	 </script>            </tr>          </table>        </td>      </tr>      <tr bgcolor="#FFFFFF">        <td width="18" bgcolor="#FFFFFF"> </td>        <td>          <table border="0" cellspacing="1" cellpadding="0" width="100%" class="textmenu">            <tr>              <td height="15" bgcolor="#FFFFFF">                <script language="javascript">     	 for(i=1;i<itens.length;i++){        document.write("<font size=\"1\"><span name=item"+i+" id=item"+i+"></span></font>");     	 }     	 </script>              </td>            </tr>          </table>        </td>      </tr>    </table></td>  </tr></table>

e no script, foi misturado php junto....

<script language="JavaScript" type="text/javascript">itens = new Array();subitens = new Array();<?php$agrupa_categoria = "";while ($linha_menu = mysql_fetch_array ($resultado_menus)) {	if (ereg ("#$linha_menu[tb_menu_nome]#", "$lista_de_menus", $regs)) {  if ($agrupa_categoria <> $linha_menu["tb_menu_id_categ"]){ 	 $count++;   	 $menus_montados = ""; 	 $agrupa_categoria = $linha_menu["tb_menu_id_categ"];?> 	 itens[<?php echo $count; ?>] = "<strong><?php echo $linha_menu[tb_categ_nome]; ?></strong>";<?php  }  $menus_montados .= "     <a href=\\\"$linha_menu[tb_menu_link]?sc=$sc\\\" target=\\\"cont\\\" class=\\\"decorlink\\\">$linha_menu[tb_menu_nome]</a>     ";		}?>	subitens[<?php echo $count; ?>] = "<?php echo $menus_montados; ?>";<?php}    ?>aux = 0;function teste(n){  if(aux==n){   e = document.all["item"+n];   e.innerHTML = "";   aux = 0; }else{  if(aux!=0){   e = document.all["item"+aux];   e.innerHTML = "";  }  aux = n;  e = document.all["item"+n];  retornar = "  ";  vetor = subitens[n].split("|");   for(i=0;i<vetor.length;i++){   retornar += " <TR><TD> " + vetor[i] + " </TD> </tr>";   }  e.innerHTML = retornar; }}</script>

Levou o dia inteiro hj.... Mas pelo menos, nao da erro de script e funciona...

 

Obrigada por tudo...

 

Alica CWB

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito