帶有jQuery的畫布/視口導航幻燈片

Question

我正在嘗試制作一個畫布外導航，該控件從左側滑入，占據頁面的20％，而內容向左滑動（其中一些滑出畫布），占據頁面的80％。 這已在Google的移動網站和Facebook的移動應用程序中看到。

這是使用CSS3 Transitions的版本： http : //codepen.io/chriscoyier/pen/umEgv

除此之外，我正在嘗試使之僅依賴於JQuery / Javascript而完全不依賴CSS轉換。

以下是我到目前為止的鏈接。

我不明白為什么它不起作用。 每次單擊.menu-button時，應切換＃main-nav的寬度； 從而產生正確的滑動效果。

有人可以幫我解決這個問題和/或幫助我解決這個問題。

這是到目前為止我所擁有的： http : //pastebin.com/0X7uT7tC

Answer 1

將CSS的寬度更改為20％，然后在加載時將其隱藏。

在這里

jQuery的

 $('#main-nav').hide();
 $('.menu-button').click(function () {
     $('#main-nav').animate({
         width: 'toggle'
     });
 });

的CSS

    .main-nav {
    position: fixed;
    top: 0;
    width: 20%;
    height: 100%;
    background: #3B3B3B;
    overflow: hidden;
}