Bug in Responsive menu

Asked

Viewed 104 times

0

I am developing a responsive menu where in the mobile version it is called through an icone, however in some occasions when resizing the page a click event ceases to work and the class (below) . menu-mobile is not withdrawn 

  <div class="nav-toggle"></div>

  <nav class="menu">
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>      
        </nav>

.

function menu (){

$('.nav-toggle').click( function () {


   if ($('.menu').hasClass('menu-mobile')) {
       $('.menu').addClass('abrir-menu').removeClass('menu-mobile');

   } else {
       $('.menu').addClass('menu-mobile').removeClass('abrir-menu');
   }  });  }



$(window).resize( function (){
      var largura = $(window).width();

      if(largura < 767){
      $('.menu').addClass('menu-mobile');
       } else {
      $('.menu').removeClass('menu-mobile abrir-menu');

}
menu();  });

In code summary, the . menu-mobile class serves only as a trigger to execute the condition to open and close the menu

javascript jquery front-end

  • I solved the window resize and load problem, however there is this bug where when resizing the menu in some situations it does not return to the default and the function of enabling the menu is kind of "broken", stops working. DVD, tries to run this code and be maximizing and decreasing the screen at a given time the function stops working, there is a breakpoint for both versions

  • Whenever the screen has below 767px the class . menu-mobile will be active, and when clicking the button it comes out and give the place to . open-menu, clicking again the opposite happens, thus creating a loop to open and close the menu, only that in some situations when we increase and decrease the screen size it stops working

  • Put the CSS so we can try to play.

1 answer

0

I solved the problem if this is to help someone in the future here is the answer, the user "DVD" had commented that when resizing the function did not detect the resize, so insert a name to my window function and called it inside the menu function, getting like this : 

function menu (){

$('.nav-toggle').click( function () {


   if ($('.menu').hasClass('menu-mobile')) {
       $('.menu').addClass('abrir-menu').removeClass('menu-mobile');

   } else {
       $('.menu').addClass('menu-mobile').removeClass('abrir-menu');
   }  
  detectaLargura();  
 });  
 }



$(window).on('load resize', function detectaLargura (){
      var largura = $(window).width();

      if(largura < 767){
      $('.menu').addClass('menu-mobile');
       } else {
      $('.menu').removeClass('menu-mobile abrir-menu');

}
menu();  
});

  • Solved the problem?

Browser other questions tagged javascript jquery front-end

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