Ir para conteúdo

Arquivado

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

guitexa

Menu deslizante

Por , em Javascript

Recommended Posts

guitexa    0

guitexa
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Olá, Guitexa.

 

Esse é um desafio comum quando estamos desenvolvendo sites ou sistemas web. Pensando nisso implementei um código de exemplo:

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Menu deslizante</title>

  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="menu.css">
</head>
<body>
  <nav class="wrap-menu">
    <ul class="menu">
      <li class="menu-item">
        <a href="">First</a>
        <ul class="submenu">
          <li class="submenu-item">First - 1</li>
          <li class="submenu-item">First - 2</li>
          <li class="submenu-item">First - 3</li>
          <li class="submenu-item">First - 4</li>
          <li class="submenu-item">First - 5</li>
        </ul>
      </li>

      <li class="menu-item">
        <a href="">Second</a>
        <ul class="submenu">
          <li class="submenu-item">Second - 1</li>
          <li class="submenu-item">Second - 2</li>
          <li class="submenu-item">Second - 3</li>
          <li class="submenu-item">Second - 4</li>
          <li class="submenu-item">Second - 5</li>
        </ul>
      </li>

      <li class="menu-item">
        <a href="">Third</a>
        <ul class="submenu">
          <li class="submenu-item">Third - 1</li>
          <li class="submenu-item">Third - 2</li>
          <li class="submenu-item">Third - 3</li>
          <li class="submenu-item">Third - 4</li>
          <li class="submenu-item">Third - 5</li>
        </ul>
      </li>

      <li class="menu-item">
        <a href="">Last</a>
        <ul class="submenu">
          <li class="submenu-item">Last - 1</li>
          <li class="submenu-item">Last - 2</li>
          <li class="submenu-item">Last - 3</li>
          <li class="submenu-item">Last - 4</li>
          <li class="submenu-item">Last - 5</li>
        </ul>
      </li>
    </ul>
  </nav>

  <script src="menu.js"></script>
</body>
</html>

CSS (reset.css)

* {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
}

a {
  color: inherit;
  text-decoration: none;
}

CSS (menu.css)

.menu-item {
  min-height: 4em;
  line-height: 4em;
  text-align: center;
  color: #FFF;
  background-color: #2C82C9;
}
.menu-item a {
  display: block;
}
.menu-item:nth-child(odd) {
  background-color: #2969B0;
}

.menu-item a.isActive + .submenu {
  max-height: 500px;
}
.submenu {
  overflow: hidden;
  max-height: 0;
  background-color: #9365B8;
  transition: max-height .4s linear;
}

JavaScript

(function () {
  'use strict';

  var $menu = document.querySelector('.menu');
  var $menuActions = document.querySelectorAll('.menu-item a');

  $menu.addEventListener('click', function(event) {
    var $origin = event.target;

    if ($origin.tagName == 'A') {
      event.preventDefault();

      for (var index = 0; index < $menuActions.length; index++) {
        console.log('AE');
        $menuActions[index].classList.remove('isActive');
      };

      $origin.classList.add('isActive');
    };
  });
})();

Tendo qualquer dúvida só falar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

guitexa    0

guitexa
Postado

Marco Bruno, obrigado pela ajuda, é exatamente isso que estou querendo, vou ver se consigo implantar esse sistema, vai dar muito trabalho pois está tudo pronto, só precisava mudar o código do menu, mas mesmo assim vou tentar fazer tudo de novo, não sei se alguém vai conseguir me ajudar alterando meu código.

 

Só notei algo que não me agradou, se eu quiser fechar o próprio item ele não fecha, por exemplo, eu abri o first e para fechá-lo preciso abrir outro item.

 

Muito obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Guitexa.

 

Quando eu comecei a desenvolver tive muitos problemas pra caminhar sozinho, por não saber como começar.

Você está aprendendo a desenvolver?

Compartilhar este post

Link para o post
Compartilhar em outros sites

guitexa    0

guitexa
Postado

Olá Marco, então, eu não estou aprendendo não, sou Eng. Civil, eu aprendi sozinho em fazer site a uns 15 anos atrás quando eu fiz um para a empresa que trabalhava, mas foi algo bem fraquinho, então eu sou o tipo que gosta de fuçar, rsrs, mas hoje estou só dando uma força para eu um amigo a fazer o site dele.

 

Por isso pedi ajuda pois não sei nada, só faço interpretações e alterações, rsrs.

 

Por exemplo, se no meu site que está no ar eu alterar a linha 18 do arquivo cod_deslizante.js para essa:

		.siblings('.tgl_menu1:visible').slideToggle('slow');

Eu consigo um resultado semelhante, porém não fica perfeito, dependendo da onde clica ele abre os dois, as vezes ele fecha os dois, não sei como trabalhar isso...

 

Veja o resultado online

 

Obrigado, abraços

Compartilhar este post

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

  • Conteúdo Similar

    • ILR master
      Abrir url na mesma janela
      Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Giovanird
      Atualizar pagina PHP que esta dentro de uma div
      Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • belann
      Upload de arquivos com javascript
      Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
    • joeythai
      Não consigo adicionar um valor de forma dinâmica
      Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
×

Informação importante

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

  Aceito