如何使用Bootstrap獲得一個不錯的可摺疊側欄菜單

Question

我已經看到無數的側欄導航菜單用bootstrap製作的例子，但沒有一個看起來是我喜歡的方式。

我找了幾個特點：

• 每個菜單項都有一個圖標和文字
• 可摺疊：只顯示圖標和頂級菜單項倒塌
• 倒塌時，簡單的動畫時/ uncollapsing（邊欄過來的內容）
• 頂級菜單項和子菜單項（層次）

This one is nice but doesn't collapse

This one collapses (but not the way I want) but is missing icons + submenu items

This one (2nd example) has the collapsing behaviour I want but is missing some other things (and the way to make the menu appear is ugly)

是否有可能對與引導+ javascript中的側邊欄所有這些功能？

Answer 1

我試着轉換一個側欄上你需要什麼。

請在這個Codepen

希望這有助於看看！