Puedes utilizar el evento resize
para saber cuando cambio el tamaño de la ventana y matchMedia para determinar si debes aplicar ejecutar show() para que vuelva a verse el menu.
Ejemplo:
$(window).resize(function() {
// si la ventana tiene 700 o mas pixels de ancho
if (window.matchMedia("(min-width: 699px)").matches) {
$("header nav").show(); // mostrar el menu
}
});
Claro que debes ajustar la media query a las mismas condiciones que estas utilizando en el CSS. (lo ajuste por ti, mide 700px la media query).
Actualización:
Viendo un poco tu código completo, yo haría estos cambios:
$(window).on('resize',function() { // aqui se decide si se vuelve a mostrar el menu (pantalla grande) if (window.matchMedia("(min-width: 699px)").matches) { $("header nav").show(); // mostrar el menu } }); $(document).ready(function() { // forzamos un resize, esto hace que el menu se muestre o no // de acuerdo a las dimensiones $(window).trigger('resize');
});
$("header nav").hide(); $(".menu_bar").click(function() { $("header nav").slideToggle("slow"); } }); //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%" }); } }); }