WebApp滑动菜单导航组件
黑色简洁风格的滑动菜单导航，在移动端 webApp 里真的挺常见也挺实用。HTML5 的语义标签配上CSS3 的动画，再加点JavaScript的交互逻辑，就能搞出一个还挺顺手的多级菜单系统。点一级菜单滑出二级，点二级再滑出三级，整套流程蛮顺的，切换也自然。
菜单用和transition和transform做滑动动画，响应也快，视觉上舒服。要做成像 App 那种滑回来功能，就可以监听history的前进后退事件，顺带再加个过渡动画，看起来更原生。
交互部分用jQuery其实还挺方便的，像$('.menu-item').on('click', ...)，写起来简单明了。配上localStorage还能保存一些设置或积分之类的数据，页面跳转之间状态不会丢，这一点蛮重要。比如你有个“2 个积分保值”的功能，数据留在本地就不会因为跳页面就丢了。
3 级菜单的嵌套要注意层级关系清楚，不然滑动起来容易乱。用z-index配合显示/隐藏逻辑控制好每一层的显隐状态就行。CSS 写的时候记得考虑下响应式布局，移动端手势操作比较频繁，touchstart和touchmove这些事件也要加上。
如果你正在搞一个偏向移动端体验的 Web 项目，这种滑动菜单导航可以优先试试。界面清爽、交互流畅，还挺贴近原生 App 体验的。想了解更多 HTML5 的用法，可以看看HTML5 CSS3 JavaScript。
文件大小：166.09KB
评论区