用jquery做了个导航条的便捷功能

公司主要还是做一些企业站，导航条是必不可少的，首页，关于我们，产品介绍。。。。 设计做的时候一般都有鼠标移上去变背景，有时候有个下拉菜单，公司以前的就是用javascript  每个导航上onmouseover   onmouseout,每个下拉上也是，为了减少开发量就做个jquery的小功能

js代码

View Code 1 (function($){ 2 $.fn.extend({ 3 MenuHoverLayerout1:function(opt,callback){ 4 5 var _obj=this; 6 var _menuID=opt.menuID 7 var _ArryWidth=opt.ArryWidth 8 var _ArryLeft=opt.ArryLeft 9 10 11 12 var i=1; 13 $(_obj).each(function(){ 14 15 //取得导航按钮宽度 16 var LiWidth=typeof(_ArryWidth[i-1])!='undefined'?_ArryWidth[i-1]:100; 17 18 //漂浮居左距离 19 var absLeft=typeof(_ArryLeft[i-1])!='undefined'?_ArryLeft[i-1]:0; 20 21 $(this).css("text-align","left");//让漂浮层从居左 和 父元素对齐 22 $(this).width(LiWidth);//导航按钮宽度赋值 23 24 var classname="BiakeCss_Li"+i;//鼠标划过时的样式 25 var classname1="BiakeCss_LiM"+i;//选中后 防止背景消失 再次加背景 26 27 28 29 //对应栏目选中 30 if(_menuID==i) 31 { 32 $(this).addClass(classname); 33 } 34 35 36 //添加漂浮元素定位 37 var absolute_p="<div class=\"Parent_absolute\"><div class=\"Child_absolute\"></div></div>"; 38 $(this).append(absolute_p) 39 40 $(this).find(".Child_absolute").width(LiWidth).css("left",absLeft);//设定漂浮层宽度和居左距离 41 42 //漂浮层内容添加 从页面获取 43 var absContent=$("#Biake_Absolute #Biake_abs"+i); 44 $(absContent).appendTo($(this).find(".Child_absolute")); 45 46 47 48 $(this).hover(function(){ 49 $(this).addClass(classname1); 50 $(this).find(".Child_absolute").show(); 51 },function(){ 52 $(this).removeClass(classname1); 53 $(this).find(".Child_absolute").hide(); 54 }) 55 56 i++; 57 }) 58 } 59 }) 60 })(jQuery);

页面代码

View Code <!--自定义导航--> <div class="Menu"> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> <div id="Biake_Absolute"> <div id="Biake_abs2" class="Biake_Absolute"></div> <div id="Biake_abs3" class="Biake_Absolute"></div> </div> </div> <script type="text/javascript"> $(".Menu li").MenuHoverLayerout1({ menuID:2,//当前栏目ID ArryWidth:[95,106,105,105,104,108,107,105,108],//导航按钮宽度 ArryLeft:[0,0,-20]//漂浮居左的距离,不写则默认为0 }); </script>

 

js写法上有什么问题，欢迎大家指出~

转载于:https://www.cnblogs.com/BiakeChou/archive/2012/05/03/2480018.html

相关资源：数据结构—成绩单生成器