[笔记] 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 范例

按赞加入粉丝团

延伸阅读