如何復制引導程序移動導航欄切換（不使用引導程序）？

Question

我在談論某些屏幕寬度下面出現的按鈕，點擊時隱藏/取消隱藏菜單（截圖如下）。 我試圖在我的網站上復制它的行為而不訴諸使用bootstrap（因為我喜歡在沒有框架的情況下工作）。

我查看了源代碼，但無法弄清楚它是如何工作的，以及最有效的方法是復制行為。 從我可以告訴它通過應用隱藏/取消隱藏類到菜單，通過按鈕激活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，則可以使用toggle方法。

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