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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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