Начальное состояние не то значит.
Вообще кроме меню на страницах могут быть иные кнопки и т.п., которые также активируются по щелчку, и можно представить себе как при этом будет вести себя меню. Может быть хотя бы область документа, а не все тело страницы должно управлять меню, если не одна кнопка?
Вот пример, в котором управление меню определено для родительского элемента, как область на странице, при этом управление производится по принципу описанному ранее в примечании:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
html, body {
height: 100%;
margin: 0;
}
#mainbox {
position: relative;
width: 300px;
height: 100%;
}
.sidebar {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 100%;
background: #eee;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
var oB = $('#mainbox').click(function() {
var m = !oB.data('m'); //получить состояние меню и инвертировать его режим
//по умолчанию меню открыто, что определяет его стиль
//а объект не имеет установленного значения и m = !false = true
oB.data({m:m}) //запомнить состояние меню
.find('.sidebar')
.stop()
.animate({left: -m * 300}, 600); //скрыть/показать меню, что при первом обращении будет равно -true * 300 = -300
})
//.data({m:1/0}); //здесь можно определить начальное состояние меню - открыто или закрыто, то есть под логику,
//но в данном случае мы не устанавливаем это, почему, в обработчике пояснение
//скрыть меню при загрузке
setTimeout(function() {
oB[0].click();
}, 1000);
});
</script>
</head>
<body>
<div id="mainbox">
<div class="sidebar">Main</div>
</div>
</body>
</html>