侧边栏弹出导航插件

下面介绍一款自己优化完善的侧边栏弹出框插件(基于jQuery)

1、首先需要有一个下面的HTML框架。可以放在DOM中的任意位置。

<div class="menu-modal">
	<div class="menu-bg"></div>
	<div class="menu">
		<!-- 里面放导航内容 -->
	</div>
</div>

 

2、接下来是js部分

 

//构造通用弹窗函数
	function mSlider(options){
            this.defaults = {
                'dom': $(".menu-modal"),//弹出层
                'direction': 'left', //弹层方向
                'distance': '70%', //弹层宽度
                't': '0.3s'//过渡时间
            };
            this.opts = $.extend({}, this.defaults, options);
            this.bgDom = this.opts.dom.children('div').eq(0);
            this.dom = this.opts.dom.children('div').eq(1);
            this.init();
        }
        mSlider.prototype = {
            init: function() {
                var _this = this;
                //弹层方向
                switch (_this.opts.direction) {
                    case 'top':
                        _this.top = '0';
                        _this.bottom = 'no';
                        _this.left = '0';
                        _this.right = 'no';
                        _this.width = '100%';
                        _this.height = _this.opts.distance;
                        _this.translate = 'translate3d(0, -100%, 0)';
                        break;
                    case 'bottom':
                        _this.top = 'no';
                        _this.bottom = '0';
                        _this.left = '0';
                        _this.right = 'no';
                        _this.width = '100%';
                        _this.height = _this.opts.distance;
                        _this.translate = 'translate3d(0, 100%, 0)';
                        break;
                    case 'right':
                        _this.top = '0';
                        _this.bottom = 'no';
                        _this.left = 'no';
                        _this.right = '0';
                        _this.width = _this.opts.distance;
                        _this.height = '100%';
                        _this.translate = 'translate3d(100%, 0, 0)';
                        break;
                    default:
                        //默认 left
                        _this.top = '0';
                        _this.bottom = 'no';
                        _this.left = '0';
                        _this.right = 'no';
                        _this.width = _this.opts.distance;
                        _this.height = '100%';
                        _this.translate = 'translate3d(-100%, 0, 0)';
                }
                //容器样式
                _this.dom.css({
                    'position': 'fixed',
                    'top': _this.top,
                    'bottom': _this.bottom,
                    'left': _this.left,
                    'right': _this.right,
                    'width': _this.width,
                    'height': _this.height,
                    'overflow-y': 'auto',
                    'background-color': '#fff',
                    'z-index': '1001',
                	'transform': _this.translate,
                	'-webkit-transform': _this.translate,
                    '-webkit-transition': 'all '+_this.opts.t+' ease-out',
                    'transition': 'all '+_this.opts.t+' ease-out',
                    '-webkit-backface-visibility': 'hidden'
                });
                //遮罩处理
                _this.bgDom.css({
                    'position': 'fixed',
                    'top': '0',
                    'left': '0',
                    'width': '100%',
                    'height': '100%',
                    'background-color': 'black',
                    'opacity': '0',
                    'z-index': '1000',
                    'pointer-events': 'none',
                    '-webkit-transition': 'all '+_this.opts.t+' ease-out',
                    'transition': 'all '+_this.opts.t+' ease-out',
                    '-webkit-backface-visibility': 'hidden'
                });
                _this.bgDom.on('touchmove', function(event) {
                    event.preventDefault();
                });
                _this.bgDom.on('touchend click', function(event) {
                    event.preventDefault();
                    _this.close();
                });
            	setTimeout(function(){_this.opts.dom.css('opacity','1')},500);
            },
            open: function(){
                var _this = this;
                _this.dom.css({'transform':'translate3d(0, 0, 0)','-webkit-transform':'translate3d(0, 0, 0)'});
                _this.bgDom.css({
                    'opacity': '0.6',
                    'pointer-events': 'auto'
                });
            },
            close: function(){
                var _this = this;
                _this.dom.css({'transform':_this.translate,'-webkit-transform':_this.translate});
                _this.bgDom.css({
                    'opacity': '0',
                    'pointer-events': 'none'
                });
            }
        }
        //生成实例
        var _right = new mSlider({
            dom: $(".menu-modal"),
            direction: "right"
        });
        $(".menu-btn").on('click', function(e){
            _right.open();
        })

 

 

 

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zh_rey

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值