html5+css3實現抽屜菜單

抽屜菜單在手機native應用中很常見。比如酷狗手機版的界面：

左側為操作菜單，默認不顯示。需要時向左滑動界面，操作菜單將從側邊緩緩展示出來，不需要時向右滑動界面，操作菜單又將隱藏在側邊而不會占位置，操作菜單這種緩入緩出用戶體驗非常不錯。這里采用css3實現抽屜菜單效果。以下代碼以及實例請在基於webkit手機瀏覽器下訪問。

html代碼如下：

<div id="container" class="container">
    <div class="left"></div><!--左側菜單-->
    <div class="right"></div><!--右側菜單-->
</div>     

樣式代碼如下:

.container{
    position: relative;
    height: 300px;
    overflow-x: hidden;
}
.left, .right{
    top: 0;
    bottom: 0;
    position: absolute;
}
.left{
    right: 0;
    z-index: 1;
    width: 150px;
    background:black;
}
.right{
    left: 0;
    z-index: 2;
    width: 100%;
    background: red;
}

組件Drawer代碼(依賴Zepto.js)如下:

(function($, window, undefined){
    var hasOwnProperty = Object.prototype.hasOwnProperty;

    function Drawer(config){
        return this._init(config);
    }

    Drawer.prototype = {
        constructor: Drawer,

        _init: function(config){
            var me = this;
            me._config = $.extend({
                //container
                //nav
                //main
                dir: 'right',
                transition: '-webkit-transform .4s ease-in-out'
            }, config);
            me._cacheParam()._bindEventListener();
            return me;
        },
        _cacheParam: function(){
            var me = this, config = me._config;
            for(var i in config){
                if(hasOwnProperty.call(config, i)){
                    me['_' + i] = config[i];
                    config[i] = null;
                    delete config[i];
                }
            }
            return me;
        },
        _bindEventListener: function(){
            var me = this,
                $nav = me._nav,
                $main = me._main,
                $container = me._container,
                direction = me._dir,
                position = {x : 0, y : 0},
                navWidth = $nav.width(),
                transition = me._transition;

            $nav.attr('data-'+direction, '0');
            $container.on('touchstart', function(e){
                var target = e.touches.item(0);

                $main.css('-webkit-transition', 'none');
                position.x = target.clientX;
                position.y = target.clientY;

                return false;                        
            }).on('touchmove', function(e){
                var target = e.touches.item(0),
                    different = target.clientX - position.x,
                    distant = parseInt($main.attr('data-'+direction)||0, 10);

                //滑動距離太短,則不處理
                if(Math.abs(different) >= 5){
                    distant += different;
                    if(direction === 'left'){
                        //左側菜單欄
                        if(distant <= 0){
                            distant = 0;
                        }
                        if(distant >= navWidth){
                            distant = navWidth; 
                        }                            
                    }else{
                        //右側菜單欄
                        if(distant >= 0){
                            distant = 0;
                        }
                        if(distant <= -navWidth){
                            distant = -navWidth; 
                        }
                    }
                    $main
                      .attr('data-'+direction, distant)
                      .css('-webkit-transform', 'translate(' + distant + 'px,0)');
                }                    
                position.x = target.clientX;
                position.y = target.clientY;                
                return false;
            }).on('touchend', function(e){
                var distant = parseInt($main.attr('data-'+direction), 10);
                if(direction === 'left'){
                    distant = distant > navWidth/2 ? navWidth : 0;
                }else{
                    distant = distant > -navWidth/2 ? 0 : -navWidth;
                }
                $main.css({
                    '-webkit-transform': 'translate(' + distant + 'px,0)',
                    '-webkit-transition': transition
                }).attr('data-'+direction, distant);
                return false;
            });
            return me;    
        }
    };    
    window.Drawer = Drawer;
})(Zepto, this);

初始化代碼:

new Drawer({
        dir: 'right',//菜單位於右邊,默認值為左邊,根據實際需要設置
    container: $container,//總容器
    nav: $container.children('.left'),//菜單欄
    main: $container.children('.right')//主界面            
});

Demo附件