jquery - 顶部抽屉导航菜单切换向下推送内容并显示事件链接

Question

我在为移动设备创建顶部抽屉导航菜单时遇到问题。我正在考虑做一些类似于 Google+ iPhone 应用程序中使用的导航菜单的事情。

单击时我希望菜单向下滑动并将页面内容向下推。

我还需要更改事件链接并添加事件类。然后事件链接也显示在顶部菜单的顶部。

我整理了一个演示: http://jsfiddle.net/RFpDJ/

如您所见，我拥有其中的大部分内容，但无法正常工作。

我正在使用或从我发现的一个演示开始工作: http://www.jordanm.co.uk/lab/topdrawer

但是我正在努力让它像上面的链接一样工作。我想尽可能使用 CSS3 转换来避免使用 jQuery(如果可能的话)。

<nav>
  <ul class="nav nav-tabs nav-stacked">
    <li class="active"><a href="#">Products</a></li><!-- active link changes -->
    <li><a href="#">Information</a></li>
    <li><a href="#">History</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Orders Complete</a></li>
  </ul>
</nav>

希望有人能帮忙，

谢谢

Answer 1

加入

 $('.menu').click(function(e){
    $('.drawer').toggleClass('active');
    e.preventDefault();
 });

http://jsfiddle.net/RFpDJ/1/