javascript - 使用 jQuery 滑入画布外/视口导航

Question

我正在尝试制作一个画布外导航，该导航从左侧滑入以占据页面的 20%，而内容向左滑动（其中一些将不在画布上）占据页面的 80%。这已在 Google 的移动网站和 Facebook 的移动应用程序中看到。

这是一个使用 CSS3 过渡的版本： http: //codepen.io/chriscoyier/pen/umEgv

除了，我正在尝试制作一个仅依赖于 JQuery / Javascript 而根本不依赖 CSS 转换的软件。

下面是我到目前为止的链接。

我不明白为什么它不起作用。每次单击 .menu-button 时，都应切换 #main-nav 的宽度；从而产生向右滑动的效果。

有人可以帮我解决这个问题和/或帮助我实现我想要实现的目标。

这是我到目前为止所拥有的：http: //pastebin.com/0X7uT7tC

score 1 · Accepted Answer

在 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;
}

1 回答 1