学步园

 

介于工作中活动页常用到下拉菜单功能，原有的下拉JS极为不方便，故用JQ写了一个可自适应位置的下拉菜单，亮点在于下拉菜单高度及位置自动居中，还有边界判断等。

[这里是DEMO地址>>]

下面是核心代码:

/*======================
App:自适应位置的下拉菜单[扩展JQ方法]
Author:Der
Date:2010-10-07
WebSite:http://www.ueder.net
=======================*/
(function($){
        $.fn.setDropMenu = function(opt){
                //参数整合
                opt = $.extend({
                        mainnav:"#mainnav", //下拉菜单容器
                        subnav:".subnav", //相对于this的子选择器
                        insubnav:".subnav > .insubnav", //相对于this的子选择器
                        curClass:"on", //on状态样式
                        dropSpeed:"fast" //动画速度
                },opt);

                //变量
                var mainnav = opt.mainnav,
                        subnav = opt.subnav,
                        insubnav = opt.insubnav,
                        curClass = opt.curClass,
                        dropSpeed = opt.dropSpeed,
                        mainnavWidth = $(mainnav).outerWidth(),
                        mainnavLeft = $(mainnav).offset().left,
                        thisHeight = $(this).outerHeight();

                //处理
                $(this).each(function(i){
                        //取宽高
                        var _this = $(this),
                                f_subnav = _this.find(subnav),
                                f_insubnav = _this.find(insubnav),
                                subnavWidth =f_insubnav.outerWidth(),
                                subnavHeight = f_insubnav.outerHeight(),
                                navWidth = _this.outerWidth(),
                                sLeft = null,
                                halfWidth = (subnavWidth-navWidth)/2;

                        //筛选有下拉菜单
                        if(f_subnav.offset()){
                                //设下拉菜单的top值
                                f_subnav.css("top",thisHeight+"px");
                                f_insubnav.css("top","-"+subnavHeight+"px");
                                //下拉菜单的原始position.left值
                                var mLeft = _this.offset().left-mainnavLeft;

                                //下拉菜单位置居中自动处理
                                if(mLeft < mainnavWidth/2){
                                        if(halfWidth < mLeft){
                                                sLeft = halfWidth;
                                        }else{
                                                sLeft = mLeft;
                                        }       

                                }else{
                                        var maxWidth = mLeft+(subnavWidth/2)+(navWidth/2);
                                        if( maxWidth < mainnavWidth){
                                                sLeft = halfWidth;
                                        }else{
                                                sLeft = subnavWidth-(mainnavWidth-mLeft);
                                        }
                                }

                                //负值判断
                                (sLeft<0)?f_subnav.css("left",Math.abs(sLeft)+"px"):f_subnav.css("left","-"+sLeft+"px");

                                //鼠标经过事件
                                _this.hover(function(){
                                        _this.css("z-index",2);
                                        //设容器宽高
                                        f_subnav.width(subnavWidth).height(subnavHeight);
                                        //下拉
                                        f_insubnav.stop().animate({
                                                top:0
                                        },dropSpeed).end().addClass(curClass);
                                },function(){
                                        _this.css("z-index","");
                                        //回拉
                                        f_insubnav.stop().animate({
                                                top:"-"+subnavHeight+"px"
                                        },dropSpeed,function(){
                                                //回拉宽高设为零
                                                f_subnav.width(0).height(0);
                                        }).end().removeClass(curClass);
                                });
                        }
                });
        };
})(jQuery);