带有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;
}