如何复制引导移动导航栏切换（不使用引导）？答案

【问题标题】：How do I replicate the bootstrap mobile navbar toggle (without using bootstrap)?如何复制引导移动导航栏切换（不使用引导）？
【发布时间】：2013-10-01 08:10:25
【问题描述】：

我说的是出现在某些屏幕宽度下方的按钮，当单击时会隐藏/取消隐藏菜单（下面的屏幕截图）。我试图在我的网站上复制它的行为而不使用引导程序（因为我喜欢在没有框架的情况下工作）。

我查看了源代码，但无法弄清楚它是如何工作的，以及最有效的方法是复制行为。据我所知，它可以通过向菜单应用隐藏/取消隐藏类（由按钮激活）与 javascript 一起使用。

是否可以使用 css checkbox hack 来复制它？还是使用 javascript 更好？

【问题讨论】：

@nailer：啊，所以它被称为汉堡菜单！我不知道，谢谢！

标签： javascript html css responsive-design hamburger-menu

【解决方案1】：

编辑：

我第一次看错了问题。

我认为使用 javascript 会更好。

如果你使用的是 jquery，你可以使用 toggle 方法。

$("#hide-show-button").click(function(){
    $(".nav").toggle();
});

【讨论】：

【解决方案2】：

这很简单：

添加汉堡菜单图标
有一个 CSS 类使导航区域处于活动状态
让 JS 从导航区域添加/删除该类
使用 CSS 过渡来处理动画（它们更有可能在移动设备上得到加速）

我喜欢http://purecss.io 上的实现。

也可以查看http://www.ymc.ch/sandbox/hamburger/mobile-menu-demo.html

【讨论】：