您的位置:首页> 日志> 前端技术 正文
DTOP

手机左滑动菜单特效

大话主席 | 2014年11月03日 |

>>收藏本文 已有 1条评论

手机左滑动菜单特效

     现在我们见过很多手机展示菜单的方式是整个页面向左滑动,然后右侧出现菜单,然后点击或者向右滑动左侧页面收起菜单。这种菜单用户体验比较好,现在一些针对手机端框架都包含了这种效果,例如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和安卓上测试通过,可以投入使用。

 

在线演示--请用手机打开:http://superslide2.com/test/phone-rightMenu.html

或者扫描二维码