手机左滑动菜单特效

     现在我们见过很多手机展示菜单的方式是整个页面向左滑动，然后右侧出现菜单，然后点击或者向右滑动左侧页面收起菜单。这种菜单用户体验比较好，现在一些针对手机端框架都包含了这种效果，例如jqm，但我们实际开发的时候往往只需要这一个效果，如果调用整个框架，总感觉有点浪费。而且有了之前使用jqm的不愉快经历，感觉不会再爱了-_-b

     所以还是自己做一个把。

我这里只说大概思路，具体的有兴趣可以看看代码（js还是比较多的，还要和css结合）：

1、body里面包含2个同级层，A：网页具体内容，B：右侧菜单，B层绝对定位放到A层下面；

2、A层右上角放一个菜单按钮A-btn；

3、js控制：点击A-btn，A层向左滑动85%距离（把B层显示出来），同时js插入A层的遮罩层A-mark，放在A层上面；

4、js控制：A-mark添加点击和滑动事件控制A层向右滑动返回初始位置，然后隐藏A-mark。

思路就是这样，还要处理一些其它问题，例如A和B高度（包含高度变化时）匹配，A宽度超出屏幕等情况。

效果已经在ios和安卓上测试通过，可以投入使用。

在线演示--请用手机打开：

或者扫描二维码