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

Question

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

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

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

Answer 1

这很简单：

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

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

另请查看http://www.ymc.ch/sandbox/hamburger/mobile-menu-demo.html

Answer 2

编辑：

我第一次看错了问题。

我认为你会更好地使用javascript。

如果您使用的是 jquery，则可以使用切换方法。

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