7

Tengo un inconveniente al hacer responsive mi página.

Sucede que al reducir el tamaño de la pantalla, mi menú normal desaparece para que aparezca uno mas chico como para dispositivo con un botón que se oculta y despliega mis secciones.

El problema está en que al apretar el botón y ocultar el menú, si vuelvo a agrandar la resolución, el menú normal vuelve a aparecer pero con los botones ocultos.

Éste es el enlace de mi página que contiene el siguiente código:

$(document).ready(main);
var contador = 1;

function main() {
  $("header nav").hide(); //Ocultamos el Menu
  $(".menu_bar").click(function() { //Funcion del Click
    $("header nav").slideToggle("slow"); //Mostramos/Ocultamos el Menu al hacer click en el Boton
  }); //Terminamos la Funcion del Click

  $(".menu_bar").click(function() {
    if (contador == 1) {
      $('nav').animate({
        left: "0"
      });
      contador = 0;
    } else {
      contador = 1;
      $("nav").animate({
        left: "-100%"
      });
    }
  });
}
$(window).resize(function() {
  if (window.matchMedia("(min-width: 400px)").matches) {
    $("header nav").addClass("show"); //Mostramos el menu
    // si estas utilizando hide(), quizá deberías usar show(),
  }
});
2
  • Voy a sonar bastante "tiquismiquis" pero: ¿por qué hacer esto con JavaScript/jQuery? Me da la impresión que se podría conseguir lo mismo (y quizás de manera más sencilla) usando sólo CSS
    – Alvaro Montoro
    Commented el 25 ene. 2016 a las 20:41
  • @AlvaroMontoro las media queries suelen tener problemas, porque son muy rígidas en la forma en que deben ser escritas, por ejemplo a veces funciona solo media screen, a veces media only screen, y a veces sólo media. Mientras con JQuery o Javascript no están esos inconvenientes. Commented el 5 ago. 2016 a las 17:55

2 respuestas 2

2

Viendo un poco tu código completo (css incluido), el primer problema nace al hacer hide en primer lugar. Esto no es necesario por que el header nav ya esta invisible con CSS y media queries: establece display: none; (cuando la pantalla tiene menos de 700 px, fijate en estilos.css linea 620). Por otra parte al poner 2 manejadores de click separados se pisan los estilos. Eso es considerado una mala practica si vas modificar los mismos elementos.

El segundo problema es que el animate que cierra el menu hacia la izq, deja la propiedad style así: style="left: -100%";, haciendo que al agrandar la pantalla, el menu este visible pero desplazado hacia la izquierda todo el ancho de la pantalla, lo que impide verlo :S, por lo que debemos reestablecer esta propiedad al cambiar a la version ancha. Esto lo hice utilizando el evento resize y removeAttr

Si reemplazas main.js por lo siguiente, todo debería funcionar como esperas.

$(document).ready(function() {

  // maneja la apertura del menu
  var estado = 0;
  $(".menu_bar").click(function() {
    // la primera vez de abre desde arriba
    if (estado === 0) { 
        $("header nav").slideToggle("slow");
        estado = 1;
    } else
    // se cierra hacia la izquierda
    if (estado === 1) { 
         $('nav').animate({
            left: "0"
        });
        estado = 2;       
    } else
    // las veces siguientes se abre desde la izquierda
    if (estado === 2) {
        $("nav").animate({
            left: "-100%"
        });
        estado = 1;
    }
  }); // $(menu).click

  // limpia los vestigios de la animacion
  $(window).resize(function() {
      // aqui se decide si se vuelve a mostrar el menu (pantalla grande)
      if (window.matchMedia("(min-width: 699px)").matches) {
         $("header nav").removeAttr('style'); // restablecemos los estilos de la animacion
         estado = 0; // restablecemos el estado, todo empieza desde el principio.
      }
  }); // $(win).redize

}); // $(doc).ready
4
  • Dale, gracias por tanta ayuda Commented el 26 ene. 2016 a las 14:01
  • @NicolasDure fijate que hice una ultima edición, por que ahora hay un problema al a achicar la pantalla por segunda vez, lo que hice fue volver estado a 0, para que todo inicie desde el principio. :) Commented el 26 ene. 2016 a las 14:20
  • Jaja, sos demasiado bueno, no me habia percatado de ese problema, es cierto, deja de funcionar el botón la 2da vez, ahora lo modifico y vuelvo a subir. Ahí lo volvi a subir al ftp Commented el 26 ene. 2016 a las 14:26
  • Ya la modifique y la subí al ftp, funciona bien ahora :), es lindo ver como va surgiendo poco a poco mi pagina..jaja, ahi anda joya, ahora me queda arreglar otros errores menores y completarla [indgraphicdesign.com.ar] Commented el 26 ene. 2016 a las 14:37
-2

Simplemente usa las propiedades del objeto window para determinar tu comportamiento, normalmente debería de bastar con ancho, pero también puedes considerar el alto.

$(document).ready(main);
var contador = 1;
function main() {
if ($(window).width() < 700) {
$("header nav").hide(); //Ocultamos el Menu
$(".menu_bar").click(function() { //Funcion del Click
    $("header nav").slideToggle("slow"); //Mostramos/Ocultamos el
    Menu al hacer click en el Boton
}
}); //Terminamos la Funcion del Click

$(".menu_bar").click(function() {
    if (contador == 1) {
        $('nav').animate({
            left: "0"
        });
        contador = 0;
    } else {
        contador = 1;
        $("nav").animate({
            left: "-100%"
        });
    }
});
}
3
  • listo, perdona, me tengo que ir al trabajo. Saludos! Commented el 25 ene. 2016 a las 14:22
  • @Nicolas Dure, recuerda que "Java != JavaScript". Si deseas usar una contracción del nombre (abreviatura) lo mejor es "Js".
    – Chofoteddy
    Commented el 25 ene. 2016 a las 15:33
  • Creo que este no es el mejor approach Commented el 26 ene. 2016 a las 16:41

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.