用JS写了一个菜单
1
2//定义所有元素
3var menuObject=new Array();
4var menuWidth=60;
5
6function Menu(name,icon,url,isSubItem)
7
{
8
this.Items=new Array();
9 this.Name=name;
10 this.Icon=icon;
11 this.Url=url;
12 this.id=RegisterMenu(this);
13
14
}
15
16
17function MenuItem(menu,name,icon,url,isSubItem)
18{
19
20 this.Name=name;
21 this.Icon=icon;
22 this.Url=url;
23 this.IsSubItem=isSubItem;
24 this.id=menu.id+""+menu.Items.length; //用于变为字符串类型相加
25
26 this.parentId=menu.id;
27 menu.Items[menu.Items.length]=this;
28
29}
30
31
32function AddMenuItem(item)
33{
34 this.Items[this.Items.length]=item;
35 item.parentId=this.id;
36
37}
38
39function RegisterMenu(m)
40{
41 menuObject[menuObject.length]=m;
42 return menuObject.length;
43}
44
45
46Menu.prototype.AddItem=AddMenuItem;
47MenuItem.prototype.AddItem=AddMenuItem;
48
49
50function GenMenu()
51{
52 //document.write("<div id=MenuContainer style='border:solid 1px red;position:relative;top:1px;left:1px;heigth:30px;'>11<div>");
53 var menuContainer=document.getElementById("MenuContainer");
54 //alert(menuObject.length);
55 for(var i=0;i<menuObject.length;i++)
56
{
57 var m=menuObject[i];
58 var leftPos=2+i*menuWidth;
59 var obj=document.createElement("<span class='Menu'></span>");
60 obj.innerText=m.Name;
61 obj.id=m.id;
62 obj.attachEvent('onclick',GenMenuItem);
63 obj.attachEvent('onmouseover',GenMenuItem);
64 obj.attachEvent('onmouseout',OutMenu);
65 //obj.onclick=GenMenuItem;
66 menuContainer.insertAdjacentElement('beforeEnd',obj);
67
68
}
69
70}
71
72function GenMenuItem()
73{
74 var menuItemContainer=document.getElementById("MenuItemContainer");
75 menuItemContainer.innerHTML="";
76
77 window.setTimeout(disMenuItem,10);
78
79 var m=menuObject[event.srcElement.id-1];
80 document.getElementById(event.srcElement.id).className='MenuOver';
81// alert(document.getElementById(event.srcElement.id).offsetLeft);
82 var miLeft=document.getElementById(event.srcElement.id).offsetLeft-10;
83 for (var i=0;i<m.Items.length ;i++ )
84 {
85 var mi=m.Items[i];
86 var obj=document.createElement("<div class='MenuItem' style='left:"+miLeft+";'></div>");
87 obj.innerText=mi.Name;
88 obj.id=mi.id;
89 obj.attachEvent('onclick',OverMenuItem);
90 obj.attachEvent('onmouseover',OverMenuItem);
91 obj.attachEvent('onmouseout',OutMenuItem);
92 menuItemContainer.insertBefore(obj);
93 }
94
95}
96
97function disMenuItem()
98{
99 var menuItemContainer=document.getElementById("MenuItemContainer");
100 menuItemContainer.style.display='';
101}
102function OutMenu()
103{
104 document.getElementById(event.srcElement.id).className='Menu';
105
106}
107
108function OverMenuItem()
109{
110 //alert(event.srcElement.id);
111 document.getElementById(event.srcElement.id).className='MenuItemOver';
112 document.getElementById(event.srcElement.id).parentNode.style.display='';
113}
114
115function OutMenuItem()
116{
117 document.getElementById(event.srcElement.id).className='MenuItem';
118 document.getElementById(event.srcElement.id).parentNode.style.display='none';
119}
120
121var m1=new Menu("个人首页","","",false);
122var sm1=new MenuItem(m1,"测试1","","",true);
123var sm2=new MenuItem(m1,"测试2","","",true);
124var sm3=new MenuItem(m1,"测试3","","",true);
125
126
127var m2=new Menu("金百合","","",false);
128var sm21=new MenuItem(m2,"帮助1","","",true);
129var sm22=new MenuItem(m2,"帮助2","","",true);
130var sm23=new MenuItem(m2,"帮助3","","",true);
131
132var m3=new Menu("同楼约会","","",false);
133var sm31=new MenuItem(m3,"心理咨询1","","",false);
134var sm32=new MenuItem(m3,"心理咨询2","","",false);
135var sm33=new MenuItem(m3,"心理咨询3","","",false);
136var sm34=new MenuItem(m3,"心理咨询3","","",false);
137var sm35=new MenuItem(m3,"心理咨询3","","",false);
138var sm36=new MenuItem(m3,"心理咨询3","","",false);
139var sm37=new MenuItem(m3,"心理咨询3","","",false);
140var sm38=new MenuItem(m3,"心理咨询3","","",false);
141
142var m4=new Menu("心理测试","","",false);
143var m5=new Menu("我的匹配","","",false);
144var sm51=new MenuItem(m5,"心理咨询1","","",false);
145var sm52=new MenuItem(m5,"心理咨询2","","",false);
146var sm53=new MenuItem(m5,"心理咨询3","","",false);
147var sm54=new MenuItem(m5,"心理咨询3","","",false);
148var sm55=new MenuItem(m5,"心理咨询3","","",false);
149var sm56=new MenuItem(m5,"心理咨询3","","",false);
150var sm57=new MenuItem(m5,"心理咨询3","","",false);
151
152
153
154var m6=new Menu("收发消息","","",false);
155var m7=new Menu("帐户管理","","",false);
156var m8=new Menu("爱情搜索","","",false);
2
//定义所有元素3
var menuObject=new Array();4
var menuWidth=60;5
6
function Menu(name,icon,url,isSubItem)7
{
8
this.Items=new Array();9
this.Name=name;10
this.Icon=icon;11
this.Url=url;12
this.id=RegisterMenu(this);13
14
}15
16
17
function MenuItem(menu,name,icon,url,isSubItem)18
{19
20
this.Name=name;21
this.Icon=icon;22
this.Url=url;23
this.IsSubItem=isSubItem;24
this.id=menu.id+""+menu.Items.length; //用于变为字符串类型相加25
26
this.parentId=menu.id;27
menu.Items[menu.Items.length]=this;28
29
}30
31
32
function AddMenuItem(item)33
{34
this.Items[this.Items.length]=item;35
item.parentId=this.id;36
37
}38
39
function RegisterMenu(m)40
{41
menuObject[menuObject.length]=m;42
return menuObject.length;43
}44
45
46
Menu.prototype.AddItem=AddMenuItem;47
MenuItem.prototype.AddItem=AddMenuItem;48
49
50
function GenMenu()51
{52
//document.write("<div id=MenuContainer style='border:solid 1px red;position:relative;top:1px;left:1px;heigth:30px;'>11<div>");53
var menuContainer=document.getElementById("MenuContainer");54
//alert(menuObject.length);55
for(var i=0;i<menuObject.length;i++)56
{
57
var m=menuObject[i];58
var leftPos=2+i*menuWidth;59
var obj=document.createElement("<span class='Menu'></span>");60
obj.innerText=m.Name;61
obj.id=m.id;62
obj.attachEvent('onclick',GenMenuItem);63
obj.attachEvent('onmouseover',GenMenuItem);64
obj.attachEvent('onmouseout',OutMenu);65
//obj.onclick=GenMenuItem;66
menuContainer.insertAdjacentElement('beforeEnd',obj);67
68
}69
70
}71
72
function GenMenuItem()73
{74
var menuItemContainer=document.getElementById("MenuItemContainer");75
menuItemContainer.innerHTML="";76
77
window.setTimeout(disMenuItem,10);78
79
var m=menuObject[event.srcElement.id-1];80
document.getElementById(event.srcElement.id).className='MenuOver';81
// alert(document.getElementById(event.srcElement.id).offsetLeft);82
var miLeft=document.getElementById(event.srcElement.id).offsetLeft-10;83
for (var i=0;i<m.Items.length ;i++ )84
{85
var mi=m.Items[i];86
var obj=document.createElement("<div class='MenuItem' style='left:"+miLeft+";'></div>");87
obj.innerText=mi.Name;88
obj.id=mi.id;89
obj.attachEvent('onclick',OverMenuItem);90
obj.attachEvent('onmouseover',OverMenuItem);91
obj.attachEvent('onmouseout',OutMenuItem);92
menuItemContainer.insertBefore(obj);93
}94
95
}96
97
function disMenuItem()98
{99
var menuItemContainer=document.getElementById("MenuItemContainer");100
menuItemContainer.style.display='';101
}102
function OutMenu()103
{104
document.getElementById(event.srcElement.id).className='Menu';105
106
}107
108
function OverMenuItem()109
{110
//alert(event.srcElement.id);111
document.getElementById(event.srcElement.id).className='MenuItemOver';112
document.getElementById(event.srcElement.id).parentNode.style.display='';113
}114
115
function OutMenuItem()116
{117
document.getElementById(event.srcElement.id).className='MenuItem';118
document.getElementById(event.srcElement.id).parentNode.style.display='none';119
}120
121
var m1=new Menu("个人首页","","",false);122
var sm1=new MenuItem(m1,"测试1","","",true);123
var sm2=new MenuItem(m1,"测试2","","",true);124
var sm3=new MenuItem(m1,"测试3","","",true);125
126
127
var m2=new Menu("金百合","","",false);128
var sm21=new MenuItem(m2,"帮助1","","",true);129
var sm22=new MenuItem(m2,"帮助2","","",true);130
var sm23=new MenuItem(m2,"帮助3","","",true);131
132
var m3=new Menu("同楼约会","","",false);133
var sm31=new MenuItem(m3,"心理咨询1","","",false);134
var sm32=new MenuItem(m3,"心理咨询2","","",false);135
var sm33=new MenuItem(m3,"心理咨询3","","",false);136
var sm34=new MenuItem(m3,"心理咨询3","","",false);137
var sm35=new MenuItem(m3,"心理咨询3","","",false);138
var sm36=new MenuItem(m3,"心理咨询3","","",false);139
var sm37=new MenuItem(m3,"心理咨询3","","",false);140
var sm38=new MenuItem(m3,"心理咨询3","","",false);141
142
var m4=new Menu("心理测试","","",false);143
var m5=new Menu("我的匹配","","",false);144
var sm51=new MenuItem(m5,"心理咨询1","","",false);145
var sm52=new MenuItem(m5,"心理咨询2","","",false);146
var sm53=new MenuItem(m5,"心理咨询3","","",false);147
var sm54=new MenuItem(m5,"心理咨询3","","",false);148
var sm55=new MenuItem(m5,"心理咨询3","","",false);149
var sm56=new MenuItem(m5,"心理咨询3","","",false);150
var sm57=new MenuItem(m5,"心理咨询3","","",false);151
152
153
154
var m6=new Menu("收发消息","","",false);155
var m7=new Menu("帐户管理","","",false);156
var m8=new Menu("爱情搜索","","",false);
这个菜单只支持2级！
效果有些抖动，不知道大家有没有更好的方法来控制子菜单显示的位置！
源码下载：点击下载源码
