0

我在为移动设备创建顶部抽屉导航菜单时遇到问题。我正在考虑做一些类似于 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>

希望有人能帮忙，

谢谢

4

1 回答 1

0

加入

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

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

于 2013-07-17T11:47:55.683 回答