我们都知道，在手机上使用QQ时，手指向右滑动会显示菜单选项等。 这些方法很好地解决了：界面的复杂性和易用性。 这些侧滑菜单方式也是我们开发HTML5移动应用时常用的。 如何实施它们？ 我们先看一下它的侧滑图：
此图来自QQ截图，无侮辱之意
基于以上分析，我们想实现它。 这里推荐一款侧滑jquery插件：Sidr.js。
我们先来看看这个插件的示例功效图：
GIF 展示 Sidr 示例的有效性
从图中可以看出，已经满足了我们的需求，我们来看看。
那么 Sidr.js 是什么？
它是一个响应式 jQuery 插件css滑入，用于轻松创建侧滑菜单。
Sidr实施流程
它在现代浏览器中使用CSS3动画来实现，而在一些不支持CSS3的浏览器中则使用jQuery.animate。
它提供了深色和浅色2种默认样式，您还可以自定义样式以满足不同的需求。
可左右滑出菜单； 响应式菜单； 菜单的内容可以是静态的、远程加载的、反弹功能的内容等。
那么如何使用呢？
首先需要在github上搜索：Sidr，然后按照下面的介绍进行操作（也可以使用CDN资源）：
Sidr 用例
从上图我们可以看到，虽然使用起来相当简单，只是引入资源并初始化元素$("#id").sidr()即可。
不过它还是有很多配置选项css滑入，可以满足不同场景的需求。 如：滑出的方向、滑出的速度、滑出滑入的反弹功能等，具体可以去github上查看。
总结：这个侧滑插件还是比较不错的。 使用方便，兼容性好。 可以考虑项目申请。
此图来源于网络，敬请告知。
结局就在这里。 如果您有什么想看的，可以评论并告诉我们。 让我们共同进步，共同交流。 欢迎您的点赞、转发、收藏、关注。
发表评论