Responsive dropdown menu, not working properly

Asked

Viewed 191 times

2

I created a menu dropdown responsive, however, is not working properly.

On the mobile screen, by clicking on the menu icon it opens and clicking on a menu link or outside the menu it closes.

However, there is a bar appearing that only disappears after clicking on the menu again.

Follows the code:

 $(document).ready(function() {
            //Cache dos elementos em variáveis
                var botao = $('.bt_menu');
                var dropDown = $('.dropDown');
                var menu = $('.menu');
                
            botao.on('click', function(event){
                
                dropDown.stop(true,true).slideToggle();
              
                  
                  event.stopPropagation(); 
            });
             
            //Clicando no html vai fechar o dorpDown
            $('html').on('click', function(){
                 dropDown.slideUp();
            });
           });
/*Resetando os valores de espaçamento */
 * {
 margin: 0;
 padding: 0;
 }

/*Estilizando a nav da classe menu */
 .menu {
 width: 100%;
 height: 50px;
 background-color: #222;
 font-family: Arial;
 }

/*Estilizando as listas */
 .menu ul {
 list-style: none;
 position: relative;
 }

.menu ul li {
 width: 150px;
 float: left;
 }

.menu a {
 padding: 15px;
 display: block;
 text-decoration: none;
 text-align: center;
 background-color: #222;
 color: #fff;
 }

.menu ul ul {
 position: absolute;
 visibility: hidden;
 }

.menu ul li:hover ul {
 visibility: visible;
 }

.menu a:hover {
 background-color: #f4f4f4;
 color: #555;
 }

.menu ul ul li {
 float: none;
 border-bottom: solid 1px #ccc;
 }

.menu ul ul li a {
 background-color: #069;
 }

/*Criando o label */
 label[for="bt_menu"]{
 padding: 5px;
 background-color: #222;
 color: #fff;
 font-family: Arial;
 text-align: center;
 font-size: 30px;
 cursor: pointer;
 height: 50px;
 }

#bt_menu {
  display: none; 
 }

label[for="bt_menu"]{
 display: none;
 }

/*Deixando o Menu Responsivo */
@media(max-width: 800px) {
label[for="bt_menu"] {
 display: block;
 }
  
#bt_menu:checked ~ .menu{
 margin-left: 0;
 }
  
.menu{
 margin-top: 5px;
 margin-left: -100%;
 transition: all .4s;
 }
  
.menu ul li {
 width: 100%;
 float: none;
 }
  
.menu ul ul {
 position: static;
 overflow: hidden;
 max-height: 0;
 transition: all 4s;
 }
  
.menu ul li:hover ul {
 height: auto;
 max-height: 200px;
 }
  
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="pt" ng-app="myapp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parsoni</title>
</head>
<body>
  
  <input type="checkbox" id="bt_menu" class="bt_menu"/>
  <label for="bt_menu">&#9776;</label>

  <nav class="menu">
       <ul id="menu-navegacao" class="dropDown">
            <li><a href="#">Serviços</a></li>
            <li><a href="#">Produtos</a></li>
            <li><a href="#">Contato</a></li>
            <li><a href="#">Login</a></li>
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Logout</a></li>
          </ul>
  </nav>
</body>
</html>

javascript html jquery css

  • Friend without HTML can’t help you much

  • Probably this black bar is not from the menu, because the slideup results in display: none. But without HTML it is impossible to do any accurate analysis.

  • I’m sorry, but I think I left a little bit less information. I did the same example on the jsfiddle site, following link: https://jsfiddle.net/2ept10va/1/ Note that when you click on the menu the first time it opens and when you click on one of the links the menu is collected, but the bar is still appearing. It only hides after clicking the menu again. Any help will be very welcome. Thanks

  • Anyone have any suggestions? I’ve been trying to solve it for a few days and I can’t. Thank you!

  • I keep looking for the solution.. Could anyone help me? It would be very helpful! Once again I thank you all

  • The bar you speak is the vertical Scroll Bar that appears if the screen is not too high? Even with the menu collected, does the vertical scroll appear on screens with low height? Is that http://prntscr.com/medbro?

  • It is not the scroll bar. It is ul itself with menu items. See example here: https://jsfiddle.net/2ept10va/1/ the menu only closes completely when it is clicked on the menu itself, in case the click happens on a menu link it partially closes and only completely closes when clicking on the menu button

Show 2 more comments

1 answer

1

The solution was simple, I just changed the javascript code for this:

$(document).ready(function() {
  var botao = document.getElementById('bt_menu');
  $('html').on('click', function(e) {
      if ($(e.target).closest("#clique").length)
          return;

      if (botao.checked === true) {
          botao.checked = false;
      }
  });
  $('.dropDown').on('click', function() {
      if (botao.checked === true) {
          botao.checked = false;
      }
  });
 });

Thank you!

  • This does not provide an answer to the question. To criticize or request clarification from an author, leave a comment below its publication. - Of Revision

  • Thanks for the clarification John, this is my first post on the site..

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.