今天下午寫了這個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);
最后總結：本想做兩種效果的，即下拉子菜單是垂直下來和橫排過去的兩種，通過參數可以任由用戶選擇，中間出了點叉子，就沒做進去，現在只有垂直下拉一種模式