##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.