html5+css3实现抽屉菜单
抽屉菜单在⼿机native应⽤中很常见。⽐如酷狗⼿机版的界⾯：
左侧为操作菜单，默认不显⽰。需要时向左滑动界⾯，操作菜单将从侧边缓缓展⽰出来，不需要时向右滑动界⾯，操作菜单⼜将隐藏在侧边⽽不会占位置，操作菜单这种缓⼊缓出⽤户体验⾮常不错。这⾥采⽤css3实现抽屉菜单效果。以下代码以及实例请在基于webkit⼿机浏览器下访问。
html代码如下：
1<div id="container" class="container">
2<div class="left"></div><!--左侧菜单-->
3<div class="right"></div><!--右侧菜单-->
4</div>
View Code
样式代码如下:
2    position: relative;
3    height: 300px;
4    overflow-x: hidden;
5 }
6.left, .right{
7    top: 0;
8    bottom: 0;
9    position: absolute;
10 }
11.left{
12    right: 0;
13    z-index: 1;
14    width: 150px;
15    background:black;
16 }
17.right{
18    left: 0;
19    z-index: 2;
20    width: 100%;
21    background: red;
22 }
View Code
组件Drawer代码(依赖Zepto.js)如下:
1 (function($, window, undefined){
2var hasOwnProperty = Object.prototype.hasOwnProperty;
3
4function Drawer(config){
5return this._init(config);
6    }
7
8    Drawer.prototype = {
9        constructor: Drawer,
10
11        _init: function(config){
12var me = this;
13            me._config = $.extend({
14//container
15//nav
16//main
17                dir: 'right',
18                transition: '-webkit-transform .4s ease-in-out'
19            }, config);
20            me._cacheParam()._bindEventListener();
21return me;
22        },
23        _cacheParam: function(){
24var me = this, config = me._config;
25for(var i in config){
26if(hasOwnProperty.call(config, i)){
27                    me['_' + i] = config[i];
28                    config[i] = null;
29delete config[i];
30                }
31            }
32return me;
33        },
34        _bindEventListener: function(){
35var me = this,
36                $nav = me._nav,
37                $main = me._main,
38                $container = me._container,
39                direction = me._dir,
40                position = {x : 0, y : 0},
41                navWidth = $nav.width(),
42                transition = me._transition;
43
44            $nav.attr('data-'+direction, '0');
45            $('touchstart', function(e){
46var target = e.touches.item(0);
47
48                $main.css('-webkit-transition', 'none');
49                position.x = target.clientX;
50                position.y = target.clientY;
51
52return false;
53            }).on('touchmove', function(e){
54var target = e.touches.item(0),
55                    different = target.clientX - position.x,
56                    distant = parseInt($main.attr('data-'+direction)||0, 10); 57
58//滑动距离太短，则不处理
59if(Math.abs(different) >= 5){
60                    distant += different;
61if(direction === 'left'){
62//左侧菜单栏
63if(distant <= 0){
64                            distant = 0;
65                        }
66if(distant >= navWidth){
67                            distant = navWidth;
68                        }
69                    }else{
70//右侧菜单栏
71if(distant >= 0){
72                            distant = 0;
73                        }
74if(distant <= -navWidth){
75                            distant = -navWidth;
76                        }
77                    }
78                    $main
79                      .attr('data-'+direction, distant)
80                      .css('-webkit-transform', 'translate(' + distant + 'px,0)');
81                }
82                position.x = target.clientX;
83                position.y = target.clientY;
84return false;
85            }).on('touchend', function(e){
86var distant = parseInt($main.attr('data-'+direction), 10);
87if(direction === 'left'){
88                    distant = distant > navWidth/2 ? navWidth : 0;
89                }else{
90                    distant = distant > -navWidth/2 ? 0 : -navWidth;
91                }
92                $main.css({
93                    '-webkit-transform': 'translate(' + distant + 'px,0)',
94                    '-webkit-transition': transition
95                }).attr('data-'+direction, distant);
96return false;
97            });
98return me;
99        }
100    };
101    window.Drawer = Drawer;
102 })(Zepto, this);
View Code
初始化代码:
1new Drawer({
2        dir: 'right',//菜单位于右边，默认值为左边，根据实际需要设置
3    container: $container,//总容器
4    nav: $container.children('.left'),//菜单栏
html手机网站5    main: $container.children('.right')//主界⾯
6 });
View Code

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。