0

Estoy tratando de crear un menú responsivo con css y jquery para lo cual tengo el siguiente código: funciona muy bien, el problema es que al darle la vuelta al dispositivo móvil y colocarlo en posición horizontal y después en vertical de nuevo, el menú se despliega muy lentamente y se lo vuelvo a hacer se demora muchos mas, a que se debe esto y como podría corregirlo, gracias por la ayuda.

$(document).ready(function(){
    var window_width = $(window).width();
    function mobileMenu(){
        if(window_width <= 768){
            //console.log(window_width);
            $("#btn-menu").click(function(){
                $("#mobile-menu").animate({"margin-left":"0"},400);
                $(this).hide();
                $("#btn-close-menu").show();
            });

            $("#btn-close-menu").click(function(){
                $("#mobile-menu").animate({"margin-left":"-100%"},400);
                $(this).hide();
                $("#btn-menu").show();

            });

            $("#mobile-menu li a").click(function(){
                $(this).parent().parent().animate({"margin-left":"-100%"},400);
                $("#btn-close-menu").hide();
                $("#btn-menu").show();
            });

        }
    }

    mobileMenu();


    $(window).resize(function(){
        var window_width = $(window).width();
        if(window_width > 768){
            $("#btn-menu").hide();
            $("#mobile-menu li a").click(function(){
                $("#btn-menu").hide();
                $("#btn-close-menu").hide();
            });
        }

        if(window_width <= 768){

           $("#btn-menu").show();
           $("#btn-close-menu").hide();

          mobileMenu();

        }
    });
});

1 respuesta 1

2

Se alenta porque cuando tu layout cambia de dimensiones le estás adjuntando una y otra vez el evento click, tu código debe de ser reestructurado de la siguiente manera:

$(document).ready(function(){
   eventosClic();
});

$(window).resize(function(){
   cosasResize(); 
});

function eventosClic(){
   $("#mobile-menu li a").click(function(){
      var window_width = $(window).width();
      if(window_width > 768){
         $("#btn-menu").hide();
         $("#btn-close-menu").hide();
      }

      if(window_width <= 768){
          $(this).parent().parent().animate({"margin-left":"-100%"},400);

          $("#btn-close-menu").hide();
          $("#btn-menu").show();
      }
  });


  $("#btn-close-menu").click(function(){
     var window_width = $(window).width();

     if(window_width <= 768){
        $("#mobile-menu").animate({"margin-left":"-100%"},400);
        $(this).hide();
        $("#btn-menu").show();
     }
  });


  $("#btn-menu").click(function(){
     var window_width = $(window).width();
     if(window_width <= 768){
        $("#mobile-menu").animate({"margin-left":"0"},400);
        $(this).hide();
        $("#btn-close-menu").show();
     }
  });

}

function cosasResize(){
   var window_width = $(window).width();
   if(window_width > 768){
      $("#btn-menu").hide();
   }

   if(window_width <= 768){
      $("#btn-menu").show();
      $("#btn-close-menu").hide();
   }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.