Jump to content
Fórum Script Brasil
  • 0

Menu deslizante


guitexa
 Share

Question

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 menu aberto, igual esse site faz: Site onde o menu funciona como eu gostaria

Meu site teste funcionando só com o menu

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 src="js/detect.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:0; margin-right:0; padding-top:20px; padding-bottom:0 padding-left:0; padding-right:0; margin-bottom:0">

<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_manual" style="margin-right:15px; margin-left:15px;"> 

            <p style="padding-top:6px;">

            <table border="0" cellspacing="0">

  <tr>

    <td><p style="margin-top:-15px;"><img src="svg/baixar_pdf.svg"></p>

    <p style="padding-top:10px; padding-bottom:12px;"><img src="svg/visu_site.svg"></p></td>

  </tr>

</table>



          </div>

                    <div class="tgl_plantas" style="margin-right:15px; margin-left:15px;"> 

            <p style="padding-top:6px;">

            <table border="0" cellspacing="0">

  <tr>

    <td><p style="margin-top:-15px;"><img src="svg/baixar_pdf.svg"></p>

    <p style="padding-top:5px; padding-bottom:12px;"><img src="svg/visu_site.svg"></p></td>

  </tr>

</table>

          </div>

                              <div class="tgl_localizacao" 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_direita3" style="color:#333;">TESTE<br /></a>

  <a class="texto_direita2" style="color:#555;">TESTE<br /></a>

  <a class="texto_direita2" style="color:#666;">TESTE<br /></a>

  <a class="texto_direita2" style="color:#888;">TESTE<br /></a>


</td>

              </tr>

</table>

</td></tr>

</table></a>

          </div>



          <div class="tgl_dicas" 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 />

              <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_links" 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" target="_blank">TESTE</a><br />

              <a class="texto_direita" target="_blank">TESTE</a><br />

              <a class="texto_direita" target="_blank">TESTE</a><br />

              <a class="texto_direita" target="_blank">TESTE</a><br />

              <a class="texto_direita4" target="_blank">TESTE</a>

</td>

              </tr>

</table>

</td></tr>

</table>          </div>

          <div class="tgl_fale" style="margin-right:15px; margin-left:15px; text-align:left; line-height:28px;"> 

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

              <font color="#333" style="line-height:19px; font-size:16px;">TESTE</font><br />

              <font color="#333" style="line-height:19px; font-size:16px;">TESTE</font><br />

              <font color="#333" style="line-height:19px; font-size:16px;">TESTE</font><br />

</td>

              </tr>

</table>

</td></tr>

</table>          </div>


      </div>

      <!-- Fim do Conteudo Oculto -->



</div></div>





</body></html>

 

Segue abaixo o JS:

jQuery.fn.toggleText = function(a,b) {
return   this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}

$(document).ready(function(){
 $('.tgl_manual').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>');
 $('.tgl_plantas').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>');
 $('.tgl_localizacao').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>');
 $('.tgl_dicas').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>');
 $('.tgl_links').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>');
 $('.tgl_fale').before('<span><div align="center" style="background-color:#fff; height:57px; width:319px;"><div align="center" style="background-color:#DE0000; border-radius: 8px 20px; height:50px; width:319px;"><font style="color:#fff; font:18px Varela Round,Lato,Helvetica,Arial,sans-serif; font-weight:400; position:relative; top:6.5px; margin-left:-1px;">TESTE</font><img style="position:relative; top:12px; padding-left:213px;" src="svg/ico_teste.svg" /><div style="background-color:#fff; position:relative; top:20px; height:7px;"></div></div></span>');

 
    $('.tgl_manual').css('display', 'none')
 $('.tgl_plantas').css('display', 'none')
    $('.tgl_localizacao').css('display', 'none')
 $('.tgl_dicas').css('display', 'none')
 $('.tgl_links').css('display', 'none')
 $('.tgl_fale').css('display', 'none')
 $('span', '#box-toggle').click(function() {
  $(this).next().slideToggle('slow')
  .siblings('.tgl_manual:visible')('.tgl_plantas:visible')('.tgl_localizacao:visible')('.tgl_dicas:visible')('.tgl_links:visible')('.tgl_fale:visible').slideToggle('slow');
  });
})

 

Segue abaixo o CSS:

 

.menus {
	color: #333;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:normal;
}
<!-- Função Menu Deslizante -->
#box-toggle .tgl {margin-bottom:0px;}
#box-toggle span {
	display:block;
	cursor:pointer; 
	margin-top:0px;
	font-family: Arial;
	font-size:17px;
	color: #666666;
	}

<!-- Função Load Pagina -->
#loader{position:absolute;width:100%;}
#conteudo{display:none;}
.info{width:100%;float:right;margin-right:2px;margin-top: 2px;}

 

Edited by guitexa
Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Forum Statistics

    • Total Topics
      149.6k
    • Total Posts
      646.2k
×
×
  • Create New...