用JS写了一个菜单

//定义所有元素
3

var menuObject=new Array();
4

var menuWidth=60;
5

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

}
15

function MenuItem(menu,name,icon,url,isSubItem)
18

{
19

this.Name=name;
21

this.Icon=icon;
22

this.Url=url;
23

this.IsSubItem=isSubItem;
24

this.id=menu.id+""+menu.Items.length; //用于变为字符串类型相加
25

this.parentId=menu.id;
27

menu.Items[menu.Items.length]=this;
28

}
30

function AddMenuItem(item)
33

{
34

this.Items[this.Items.length]=item;
35

item.parentId=this.id;
36

}
38

function RegisterMenu(m)
40

{
41

menuObject[menuObject.length]=m;
42

return menuObject.length;
43

}
44

Menu.prototype.AddItem=AddMenuItem;
47

MenuItem.prototype.AddItem=AddMenuItem;
48

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

}
69

}
71

function GenMenuItem()
73

{
74

var menuItemContainer=document.getElementById("MenuItemContainer");
75

menuItemContainer.innerHTML="";
76

window.setTimeout(disMenuItem,10);
78

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

}
96

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级！
效果有些抖动，不知道大家有没有更好的方法来控制子菜单显示的位置！

源码下载：点击下载源码