[筆記] RWD 自適應版型 漢堡選單實作與故障排除

章節連結

自適應選單中常見的漢堡選單的實作經驗和故障排除。關鍵在於:利用 JavaScript 控制 CSS的Class的刪除與新增(toggle),並搭配一些隱藏技巧。hamburger navbar icon


實作步驟

1. HTML 架構

別忘記到 jQuery 官網,並將 script 加入。同時,Font Awesome 上頭已經有免費的圖案可以利用,也別忘記引入。

2. JavaScript 架構

本次需要利用的 jQuery,這是一個基於 JavaScript 而興起的函式庫(Library),具有跨瀏覽器的特性,可以降低因使用者瀏覽器的差異,而衍生的一連串相容性問題。
本次是利用其 toggleClass 的功能,在 body 上添加/關閉 特定的 Class 屬性,達到「當使用者點擊選單選項時,導覽列自動收合」的效果。

3. CSS 架構

4. 參考資料來源

六角學院的 Codepen 範例

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:460