自适应导航栏

demo展示：https://kankan.fun/assets/navbar/
代码下载：https://github.com/kankanol1/navbar.git

需求分析

随着自己网站的内容增多，整个横屏宽度已经容不下导航内容，尤其在手机上代开的时候，为此，自己做了一个自适应的导航条来满足网站需求。
当屏幕宽度变窄时，用一张图片代替所有导航条，通过点击图片，再100%竖屏显示items。当再次点击时或者移出nav 区域的时候隐藏导航条。

编译环境和涉及内容

WebStorm(大家还可以用，VScode、Hbuilder、txt等)
css利用了sass编译器（要先安装Ruby环境）

鼠标事件
媒体查询

文件结构

├─ img
│ └─ icon.png
├─ js
│ └─ index.js
├─ css
│ ├─ reset.js
│ └─ index.js
├─ index.html

代码

直接从我的github上面clonej即可，git命令：

git clone https://github.com/kankanol1/navbar.git

现在的你一定会感谢现在拼命的自己，加油！！