Menu deslizante
Olá, estou ajudando um amigo a editar um site e estou com uma dificuldade com um menu em JS, atualmente se clicar em todos os menus ele vai abrindo e fica tudo aberto, eu gostaria que sempre que eu clicar num menu ele fechasse o que está aberto, para que sempre ficasse um único item aberto, igual esse site faz: Site com o menu funcionando como eu queria
Alguém pode me ajudar a alterar esse código?
Meu site teste funcionando só com o menu
Segue abaixo os códigos utilizados:
Código CSS: deslizante.css
Código JS: cod_deslizante.js
Código JS: jquery.min.js
Código JS: load.js
Segue abaixo o HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<META name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<META name="apple-touch-fullscreen" content="YES">
<TITLE>Teste</TITLE>
<link href="css/deslizante.css" rel="stylesheet" type="text/css">
<script src="js/load.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/cod_deslizante.js"></script>
</head>
<body style="margin-left:20px; margin-right:0; padding-top:20px; padding-bottom:20px; padding-left:0; padding-right:0; margin-bottom:20px">
<div id="header" class="toolbar">
<div id="header-top">
<div id="header2" class="toolbar">
<div id="header-top2">
</div>
</div>
</div>
<div id="home" tab="welcome" spaceid="954010550" selected="true" style="left: 0%;">
<div class="footer">
<div align="center">
<div>
<div id="conteudo" align="center" style="margin-top:10px;">
<!-- Começo dos conteúdos -->
<div id="box-toggle" class="menus">
<div class="tgl_menu1" style="margin-right:15px; margin-left:15px; text-align:left;">
<table width="100%" border="0" cellspacing="0" style="padding-top:15px; padding-bottom:10px;">
<tr>
<td align="center"><table width="288" border="0" cellspacing="0">
<tr>
<td align="left">
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
</td>
</tr>
</table>
</td></tr>
</table></a>
</div>
<div class="tgl_menu2" style="margin-right:15px; margin-left:15px; text-align:left;">
<table width="100%" border="0" cellspacing="0" style="padding-top:10px; padding-bottom:12px;">
<tr>
<td align="center"><table width="288" border="0" cellspacing="0">
<tr>
<td align="left">
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
</td>
</tr>
</table>
</td></tr>
</table>
</div>
<div class="tgl_menu3" style="margin-right:15px; margin-left:15px; text-align:left;">
<table width="100%" border="0" cellspacing="0" style="padding-top:10px; padding-bottom:12px;">
<tr>
<td align="center"><table width="288" border="0" cellspacing="0">
<tr>
<td align="left">
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
</td>
</tr>
</table>
</td></tr>
</table> </div>
<div class="tgl_menu4" style="margin-right:15px; margin-left:15px; text-align:left;">
<table width="100%" border="0" cellspacing="0" style="padding-top:10px; padding-bottom:12px;">
<tr>
<td align="center"><table width="288" border="0" cellspacing="0">
<tr>
<td align="left">
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
<a class="texto_direita">TESTE</a><br />
</td>
</tr>
</table>
</td></tr>
</table> </div>
</div>
<!-- Fim do Conteudo Oculto -->
</div></div>
</body></html>Discussão (4)
Carregando comentários...