自适应位置的下拉菜单功能
介于工作中活动页常用到下拉菜单功能,原有的下拉JS极为不方便,故用JQ写了一个可自适应位置的下拉菜单,亮点在于下拉菜单高度及位置自动居中,还有边界判断等。
下面是核心代码:
/*====================== 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);