响应导航栏

Question

我如何创建一个也适用于移动设备的响应式导航栏？

我需要的是一个锚点，当点击它会将页面推到右侧并且导航栏出现在右侧。 （有点像facebook的移动导航栏的工作方式。）

我能找到的最好的例子是here，但我似乎无法选择仅使用右推菜单按钮的代码。

Answer 1

尝试使用HTML5-Navigation-Menu

带有手机和平板电脑的响应式导航栏

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

Answer 2

这样的东西？显然它可以更美观，等等，但基本结构有效。

<强> 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/