menú desplegable que no se cierra

[raul9975]

Hola, actualmente estoy estudiando Jquery Mobile y que mejor forma que prácticar.

Quise hacer un menú vertical que al pulsar un botón aparezca por la izquierda y despues desaparezca, para ello me guié por un tutorial que no recuerdo donde fué.

El caso es que he podido hacerlo pero surge un problema y es que no se cierra hasta que no se vuelve a dar click en la parte de arriba del navegador; al final en la navegación es un poco incómodo pues al pasar a otra página(estoy haciendo un html múltipágina para web movil) el menú no se cierra sino pulsas la parte de arriba, quedandose abierto y no viendose la página, mi idea era que al pulsar en uno de los enlaces del menú, este se volviera a cerrar

Les paso el JS para ver si me pueden dar una solución, yo creo que es fácil pero aún no me entero mucho de estas cosas:

$(document).ready(main);

var contador=1;

function main(){
$('.menubar').click(function(){

if(contador == 1){
$('nav').animate({
left: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
left: '-100%'
});
}

});

};

Yo creo que el problema es que al estar todo en un mismo documento(html multipágina), cuando cambio de página al ser el mismo documento no se reinicia el valor de contador, he intentado mil formas pero no se como hacer.
¿Alguna idea?. Gracias por la atención.