jQuery手机图标导航菜单效果
图标风格的手机导航菜单,配上 jQuery 做的动态交互,效果是真的挺酷的。每个图标都能点一下展开菜单,用 .click()
搭配 .toggleClass()
得又简单又直观。
滑动、淡入淡出的动画加上 jQuery 的.animate() 方法,视觉上还挺有感觉。配合 .delay()
设置一下节奏,点起来不会突兀,用户体验也就上来了。
图标这块,建议你直接用 Font Awesome 或 Material Icons,样式统一,还能省不少事。想要调整颜色大小,用 color
、font-size
、margin
这些 CSS 属性就能搞定。
菜单在不同屏幕上显示正常也是重点,配个 @media
查询,保证小屏手机上也能优雅地展开收起,体验不会翻车。
性能方面,少操作 DOM,多用缓存,事件用 .on()
来做委托,能省资源还跑得快,适合复杂点的交互。
想试试类似的东西?你可以看看这些:
如果你正好在做移动端页面,想加点互动感强又不失美观的菜单,这套 jQuery 图标导航还挺值得一试。
下载地址
用户评论