jQuery插件之：nav 菜单
今天下午写了这个nav菜单插件，点击下载,特记之
用法讲解(example):
1 $("div.header").Nav({
2 /**主菜单选项**/
3 number : 5, //主菜单数量
4 NavText : ['首页','简介','我的信息','我的博客','关注'], //主菜单名参数
5 NavHref : ['?m1','?m2','?m3','?m4'], //主菜单链接,务必和菜单选项保持一致
6 NavWidth : 100, //主菜单宽度
7 /**子菜单选项**/
8 sonNav : true, //是否设置子菜单
9 sonText : { //子菜单参数
10 首页 : ['首页一','首页二','首页三'],
11 简介 : ['sonmenu2','sonmenu2'],
12 我的信息 : ['sonmenu5','sonmenu5','sonmenu5','sonmenu5'],
13 我的博客 : ['sonmenu4'],
14 关注 : ['sonmenu3','sonmenu3','sonmenu3','sonmenu3']
15 },
16 sonNavHref : { //子菜单链接,务必和菜单选项保持一致
17 首页 : ['?1'],
18 简介 : ['?2'],
19 我的信息 : ['?3'],
20 我的博客 : ['?4'],
21 关注 : ['?5']
22 },
23 sonNavWidth : 100 //子菜单宽度
24 });
Html:
1 <div class="header"></div>
CSS:(base.css这里不发了，都参照图片切换那个，下面的是菜单插件的css)
1 nav{position:relative; margin-left:-3px;}
2 nav li{position:relative; display:inline-block; text-align:center; text-decoration:none; background: #000; color:#fff; margin-left:3px;}
3 nav li a{background:#000; color:#fff; display:block; padding:8px 0; width:100px;}
4 nav p{position:absolute; left:0px; top:30px; padding-top:1px; z-index:100; display:none;}
5 nav p a{display:block; padding:8px 0; width:100px; text-align:center; text-decoration:none; background: #000; color:#fff;}
6 nav li p a:hover{background:#444;}
jQuery插件代码：
1 //Nav插件
2 (function(){
3 $.fn.Nav = function(options){
4 var _this = this;
5 var defaults = {
6 number : 4,
7 NavText : ['menu1','menu2','menu3','menu4'],
8 NavHref : ['#1','#2','#3','#4'],
9 sonNav : true,
10 sonText : {
11 menu1 : ['sonmenu1'],
12 menu2 : ['sonmenu2'],
13 menu3 : ['sonmenu3'],
14 menu4 : ['sonmenu4']
15 },
16 sonNavHref : {
17 menu1 : ['#1'],
18 menu2 : ['#2'],
19 menu3 : ['#3'],
20 menu4 : ['#4']
21 },
22 NavWidth : 100,
23 sonNavWidth : 100
24 }
25 var opts = $.extend(defaults,options);
26
27 var nav = '<nav><ul></ul></nav>';
28
29 _this.html(nav);
30
31
32 //导入主菜单
33 var menu = [],
34 menuHref = [],
35 navA = '';
36 for(var i = 0; i < opts.number; i++){
37 menu.push(opts.NavText[i]);
38 menuHref.push(opts.NavHref[i]);
39 var h = menuHref[i];
40 if(!h){
41 h = '#';
42 }
43 navA += '<li class="n' + i + '"><a href="' + h + '">' + menu[i] + '</a></li>';
44 }
45 $('nav ul').append(navA);
46
47 //设置主菜单宽度
48 $('nav ul li a').css({'width':opts.NavWidth + 'px'});
49
50 if(opts.sonNav){
51 //导入子菜单
52 var sonMenuName = [],
53 sonMenuVal = [];
54 $.each(opts.sonText,function(index,value){
55 sonMenuName.push(index);
56 sonMenuVal.push(value);
57 });
58
59 //子菜单链接
60 var sonMenuHref = [];
61 $.each(opts.sonNavHref,function(index,value){
62 sonMenuHref.push(value);
63 });
64
65 for(var i = 0; i < menu.length; i++){
66 $.each(sonMenuName,function(index,value){
67 if(menu[i] == value){
68 var sonNav = '<p>';
69 for(var j = 0; j < sonMenuVal[index].length; j++){
70 var h = sonMenuHref[index][j];
71 if(!h){
72 h = '#';
73 }
74 sonNav += '<a href="' + h + '">' + sonMenuVal[index][j] + '</a>';
75 }
76 sonNav += '</p>';
77 $('nav li.n' + i).append(sonNav);
78 }
79 });
80 }
81
82 //设置子菜单宽度
83 $('nav ul li p a').css({'width':opts.sonNavWidth + 'px'});
84
85 //子菜单鼠标事件
86 $("nav ul li").find("a").mouseenter(function(e){
87 e.stopPropagation();
88 $(this).next().slideDown('fast');
89 });
90 $("nav ul li").mouseleave(function(){
91 $(this).find("p").slideUp('fast');
92 });
93
94 }
95
96
97
98
99 }
100 })(jQuery);
最后总结：本想做两种效果的，即下拉子菜单是垂直下来和横排过去的两种，通过参数可以任由用户选择，中间出了点叉子，就没做进去，现在只有垂直下拉一种模式
