Skip to main content
9 de 10
se añadieron 4 caracteres en el cuerpo
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81

##Actualización:

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

Déjame saber si tienes algún problema.

rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81