很多小伙伴學(xué)習(xí)了一段時間的HTML和css，就想自己動手試試制作導(dǎo)航條菜單，不過卻沒有思路，今天小編我就來分享一下HTML和css制作導(dǎo)航條的實例，大家可以參考參考如圖，制作導(dǎo)航條菜單一般是用一個div嵌套ul和li標(biāo)簽，然后li。

您要的效果應(yīng)該是下面這樣的示例代碼如下lt！DOCTYPE HTMLlthtmllthead ltmeta。

HTML5+CSS3做一個后臺管理系統(tǒng)的側(cè)邊導(dǎo)航欄，點擊三條杠，可以收起或展開側(cè)邊導(dǎo)航欄收起時，圖標(biāo)變大，文本在圖標(biāo)下方，管理員頭像右側(cè)的歡迎語隱藏展開時圖標(biāo)變小，文本在圖標(biāo)的右側(cè)顯示，管理員頭像右側(cè)的歡迎語顯示。