响应Nav条

Question

我该如何创建一个同样适用于移动设备的响应导航条呢？

我需要的是一个锚，当点击会把页面推到右边，并使导航条出现在右边。(有点像facebook手机导航栏的工作方式。)

我能找到的最好的例子是这里，但是我似乎无法分离那些只使用正确的推送菜单按钮的代码。

Answer 1

像这样吗？显然，它可以设计得更漂亮，等等，但基本的结构工作。

HTML:

<div id="menu">
  <ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
  </ul>
</div>
<button id="menuHandle">Menu</button>

CSS:

#menu {
    background-color:#abcdef;
    float:left;
    display:none;
    padding:20px;
}

js (好，jquery)

$('#menuHandle').click(function(){
  $('#menu').fadeToggle();
});

JSFiddle：http://jsfiddle.net/U9CT6/

Answer 2

尝试HTML5 5-导航-菜单

有移动和平板的响应式Nav条

https://github.com/tushgraph/HTML5-Navigation-Menu.git