Jump to content
AlexandrePrezzi

Auxilio Menu Drop

By AlexandrePrezzi, in HTML e CSS

Recommended Posts

AlexandrePrezzi    0

AlexandrePrezzi
Posted

Preciso de uma ajuda....

 

Tenho um código que gera um botao  dropdown e dentro dele gera um segundo nivel....

  

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
</style>
</head>
<body>
   
<div class="container">
                                       
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">Segundo <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
        </ul>
      </li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">Primeiro <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">3nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">4nd level dropdown</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
   $(this).next('ul').toggle();
   e.stopPropagation();
   e.preventDefault();
  });

});
</script>

</body>
</html>

o que acontece 

 

Se eu clico em "Primeiro" abre um menu de subitens ao lado .... quando eu clico de novo ele fecha (ate ai ok)

Mas supondo que eu clique em "Primeiro"  (abre ao lado) ... mas sem clicar pra fechar eu clico em "Segundo" (abre o submenu ao lado mas sem fechar o primeiro).

e isso acaba deixando empilhado..

 

Gostaria q quando tu clica em Segundo (caso o primeiro esteja expandido ele feche)  e vice-versa.

 

Na imagem coloquei o q esta acontecendo.....

erroMenu.png

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing HTML e CSS

  • Similar Content

    • AlexandrePrezzi
      Menu com níveis
      By AlexandrePrezzi
      Pessoal, estou com um problema em um menu (nav) que possui 2 níveis
      Peguei esse código "pronto" porém está com algo que não consigo entender
       
      O link do segundo nível quando clica não redireciona para a página desejada ,  porém se eu clicar e pedir para abrir em nova guia dai ele funciona..
       
      Vou colocar o código aqui (tentei deixar o mais simples possível,  com apenas os itens a serem testados)
       
      Fico no aguardo
      <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script> $(document).ready(function () { $('.navbar .dropdown-item').on('click', function (e) { var $el = $(this).children('.dropdown-toggle'); var $parent = $el.offsetParent(".dropdown-menu"); $(this).parent("li").toggleClass('open'); if (!$parent.parent().hasClass('navbar-nav')) { if ($parent.hasClass('show')) { $parent.removeClass('show'); $el.next().removeClass('show'); $el.next().css({"top": -999, "left": -999}); } else { $parent.parent().find('.show').removeClass('show'); $parent.addClass('show'); $el.next().addClass('show'); $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4}); } e.preventDefault(); e.stopPropagation(); } }); $('.navbar .dropdown').on('hidden.bs.dropdown', function () { $(this).find('li.dropdown').removeClass('show open'); $(this).find('ul.dropdown-menu').removeClass('show open'); }); }); </script> <style> .navbar .dropdown-toggle, .navbar .dropdown-menu a { cursor: pointer; } .navbar .dropdown-item.active, .navbar .dropdown-item:active { color: inherit; text-decoration: none; background-color: inherit; } .navbar .dropdown-item:focus, .navbar .dropdown-item:hover { color: #16181b; text-decoration: none; background-color: #f8f9fa; } @media (min-width: 767px) { .navbar .dropdown-toggle:not(.nav-link)::after { display: inline-block; width: 0; height: 0; margin-left: .5em; vertical-align: 0; border-bottom: .3em solid transparent; border-top: .3em solid transparent; border-left: .3em solid; } } </style> </head> <body> <div class="navbar navbar-expand-md navbar-dark bg-dark mb-4" role="navigation"> <a class="navbar-brand" href="#">#####</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Testar</a> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li class="dropdown-item" ><a href="http://www.google.com">Google</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Submenu</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1"> <li class="dropdown-item"><a href="http://www.google.com">Google</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </body> </html>  

    • henriquers
      Campo de busca SELECT2 não esta filtrando
      By henriquers
      Estou com um problema com o Select2, ele tem um campo de busca mas não esta filtrando corretamente e não estou entendo o motivo, sem utilizar o AJAX colocando os options manualmente ele funciona corretamente, mas trazendo os dados via AJAX ele não funciona o campo de busca.
      Se aguem poder me dar uma luz agradeço a ajuda.
       

       
      Nessa imagem estou tentando filtrar apenas para os itens que tenha LUVA na descrição, mas não funciona, posso colocar qual quer coisa que ele não faz o filtro
       
      Abaixo segue meu codigo
       
      HTML
      <!DOCTYPE HTML PUBLIC> <HTML> <HEAD> <TITLE> Select2 </TITLE> <link href="select2/select2.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/pt-BR.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/> <script> $(document).ready(function(){ $("#selUser").select2({ language: "pt-br", ajax: { url: "get_dados.php", type: "GET", dataType: 'json', delay: 200, data: function (params) { return { q: params.term, // search term page: params.page }; }, processResults: function (response) { return { results: response }; }, cache: true }, width: "20%", closeOnSelect: true, }); }); </script> </head> <body> <select id='selUser' style='width: 200px;'> <option value='0'>- Search user -</option> </select> </body> </html> get_dados.php
      <?php include './conn_orcl.php'; $select="SELECT PRO_CODPRO PRODUTO,TRIM(PRO_DESCRI) DESCRICAO FROM F_PRODS WHERE PRO_LOCEST='ALMOX' AND PRO_STATUS = 'AT' ORDER BY DESCRICAO"; $parse=oci_parse($conn,$select); oci_execute($parse); $data = array(); while($row=oci_fetch_array($parse)){ $data[] = array("id"=>$row['PRODUTO'], "text"=>$row['PRODUTO']." - ".$row['DESCRICAO']); }; echo json_encode($data); ob_end_flush(); oci_free_statement($parse); oci_close($conn); ?>  
    • João Carlos de Jesus
      Formatar "opacity"
      By João Carlos de Jesus
      Eu queria que opacity só funcionasse no id direcionado, menos na imagem
       
      <style> #test:not(.teste){ color:blue; -webkit-opacity:0.5; } </style> <div id="test"> <div> <h2>Olá</h2> </div> <img class="teste"src="https://www.prestus.com.br/wp-content/uploads/2018/07/script-de-atendimento-1-1024x683.jpg"style="width:100px;height:100px;"/> </div>  
       
    • Nicole Hawkins
      How to change the font of the whole site in HTML?
      By Nicole Hawkins
      I wanted to know if it is possible to change all the fonts of a site in html?
    • Sapinn
      Balões com html e css
      By Sapinn
      Tenho um código de um balão de borda feito com html e css mas gostaria de saber como fazer para colocar a seta que está virada para baixo em cima do balão
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
              body {
          padding: 140px 10px;
          text-align: center;
      }
      /* Criando o balão */
      .bubble {
          background-color: #fff;
          border: 2px solid #333;
          border-radius: 5px;
          color: #333;
          display: inline-block;
          font: 16px/24px sans-serif;
          padding: 12px 24px;
          position: absolute;
      }
      /* Criando o triângulo */
      .bubble.active:after,
      .bubble.active:before {
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 15px solid #fff;
          bottom: -15px;
          content: '';
          left: 80%;
          margin-left: -15px;
          position: absolute;
      }
      /* Criando a borda do triângulo */
      .bubble.active:before {
          border-left: 18px solid transparent;
          border-right: 18px solid transparent;
          border-top: 18px solid;
          border-top-color: inherit;
          bottom: -18px;
          margin-left: -18px;
      }
          </style>
      </head>
      <body>
          <span class="bubble active">Balão com borda</span>
      </body>
      </html>
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.

  I accept