用JS写了一个菜单
1![](/Images/OutliningIndicators/None.gif)
2
//定义所有元素
3
var menuObject=new Array();
4
var menuWidth=60;
5![](/Images/OutliningIndicators/None.gif)
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![](/Images/OutliningIndicators/InBlock.gif)
14
}
15![](/Images/OutliningIndicators/None.gif)
16![](/Images/OutliningIndicators/None.gif)
17
function MenuItem(menu,name,icon,url,isSubItem)
18
{
19![](/Images/OutliningIndicators/InBlock.gif)
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![](/Images/OutliningIndicators/InBlock.gif)
26
this.parentId=menu.id;
27
menu.Items[menu.Items.length]=this;
28![](/Images/OutliningIndicators/InBlock.gif)
29
}
30![](/Images/OutliningIndicators/None.gif)
31![](/Images/OutliningIndicators/None.gif)
32
function AddMenuItem(item)
33
{
34
this.Items[this.Items.length]=item;
35
item.parentId=this.id;
36
37
}
38![](/Images/OutliningIndicators/None.gif)
39
function RegisterMenu(m)
40
{
41
menuObject[menuObject.length]=m;
42
return menuObject.length;
43
}
44![](/Images/OutliningIndicators/None.gif)
45![](/Images/OutliningIndicators/None.gif)
46
Menu.prototype.AddItem=AddMenuItem;
47
MenuItem.prototype.AddItem=AddMenuItem;
48![](/Images/OutliningIndicators/None.gif)
49![](/Images/OutliningIndicators/None.gif)
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![](/Images/OutliningIndicators/InBlock.gif)
68
}
69![](/Images/OutliningIndicators/InBlock.gif)
70
}
71![](/Images/OutliningIndicators/None.gif)
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![](/Images/OutliningIndicators/None.gif)
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![](/Images/OutliningIndicators/None.gif)
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![](/Images/OutliningIndicators/None.gif)
115
function OutMenuItem()
116
{
117
document.getElementById(event.srcElement.id).className='MenuItem';
118
document.getElementById(event.srcElement.id).parentNode.style.display='none';
119
}
120![](/Images/OutliningIndicators/None.gif)
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![](/Images/OutliningIndicators/None.gif)
126![](/Images/OutliningIndicators/None.gif)
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![](/Images/OutliningIndicators/None.gif)
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![](/Images/OutliningIndicators/None.gif)
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![](/Images/OutliningIndicators/None.gif)
152![](/Images/OutliningIndicators/None.gif)
153![](/Images/OutliningIndicators/None.gif)
154
var m6=new Menu("收发消息","","",false);
155
var m7=new Menu("帐户管理","","",false);
156
var m8=new Menu("爱情搜索","","",false);
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
15
![](/Images/OutliningIndicators/None.gif)
16
![](/Images/OutliningIndicators/None.gif)
17
![](/Images/OutliningIndicators/None.gif)
18
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
30
![](/Images/OutliningIndicators/None.gif)
31
![](/Images/OutliningIndicators/None.gif)
32
![](/Images/OutliningIndicators/None.gif)
33
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/InBlock.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
38
![](/Images/OutliningIndicators/None.gif)
39
![](/Images/OutliningIndicators/None.gif)
40
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/InBlock.gif)
43
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
44
![](/Images/OutliningIndicators/None.gif)
45
![](/Images/OutliningIndicators/None.gif)
46
![](/Images/OutliningIndicators/None.gif)
47
![](/Images/OutliningIndicators/None.gif)
48
![](/Images/OutliningIndicators/None.gif)
49
![](/Images/OutliningIndicators/None.gif)
50
![](/Images/OutliningIndicators/None.gif)
51
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/InBlock.gif)
54
![](/Images/OutliningIndicators/InBlock.gif)
55
![](/Images/OutliningIndicators/InBlock.gif)
56
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
57
![](/Images/OutliningIndicators/InBlock.gif)
58
![](/Images/OutliningIndicators/InBlock.gif)
59
![](/Images/OutliningIndicators/InBlock.gif)
60
![](/Images/OutliningIndicators/InBlock.gif)
61
![](/Images/OutliningIndicators/InBlock.gif)
62
![](/Images/OutliningIndicators/InBlock.gif)
63
![](/Images/OutliningIndicators/InBlock.gif)
64
![](/Images/OutliningIndicators/InBlock.gif)
65
![](/Images/OutliningIndicators/InBlock.gif)
66
![](/Images/OutliningIndicators/InBlock.gif)
67
![](/Images/OutliningIndicators/InBlock.gif)
68
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
69
![](/Images/OutliningIndicators/InBlock.gif)
70
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
71
![](/Images/OutliningIndicators/None.gif)
72
![](/Images/OutliningIndicators/None.gif)
73
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
74
![](/Images/OutliningIndicators/InBlock.gif)
75
![](/Images/OutliningIndicators/InBlock.gif)
76
![](/Images/OutliningIndicators/InBlock.gif)
77
![](/Images/OutliningIndicators/InBlock.gif)
78
![](/Images/OutliningIndicators/InBlock.gif)
79
![](/Images/OutliningIndicators/InBlock.gif)
80
![](/Images/OutliningIndicators/InBlock.gif)
81
![](/Images/OutliningIndicators/InBlock.gif)
82
![](/Images/OutliningIndicators/InBlock.gif)
83
![](/Images/OutliningIndicators/InBlock.gif)
84
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
85
![](/Images/OutliningIndicators/InBlock.gif)
86
![](/Images/OutliningIndicators/InBlock.gif)
87
![](/Images/OutliningIndicators/InBlock.gif)
88
![](/Images/OutliningIndicators/InBlock.gif)
89
![](/Images/OutliningIndicators/InBlock.gif)
90
![](/Images/OutliningIndicators/InBlock.gif)
91
![](/Images/OutliningIndicators/InBlock.gif)
92
![](/Images/OutliningIndicators/InBlock.gif)
93
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
94
![](/Images/OutliningIndicators/InBlock.gif)
95
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
96
![](/Images/OutliningIndicators/None.gif)
97
![](/Images/OutliningIndicators/None.gif)
98
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
99
![](/Images/OutliningIndicators/InBlock.gif)
100
![](/Images/OutliningIndicators/InBlock.gif)
101
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
102
![](/Images/OutliningIndicators/None.gif)
103
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
104
![](/Images/OutliningIndicators/InBlock.gif)
105
![](/Images/OutliningIndicators/InBlock.gif)
106
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
107
![](/Images/OutliningIndicators/None.gif)
108
![](/Images/OutliningIndicators/None.gif)
109
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
110
![](/Images/OutliningIndicators/InBlock.gif)
111
![](/Images/OutliningIndicators/InBlock.gif)
112
![](/Images/OutliningIndicators/InBlock.gif)
113
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
114
![](/Images/OutliningIndicators/None.gif)
115
![](/Images/OutliningIndicators/None.gif)
116
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
117
![](/Images/OutliningIndicators/InBlock.gif)
118
![](/Images/OutliningIndicators/InBlock.gif)
119
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
120
![](/Images/OutliningIndicators/None.gif)
121
![](/Images/OutliningIndicators/None.gif)
122
![](/Images/OutliningIndicators/None.gif)
123
![](/Images/OutliningIndicators/None.gif)
124
![](/Images/OutliningIndicators/None.gif)
125
![](/Images/OutliningIndicators/None.gif)
126
![](/Images/OutliningIndicators/None.gif)
127
![](/Images/OutliningIndicators/None.gif)
128
![](/Images/OutliningIndicators/None.gif)
129
![](/Images/OutliningIndicators/None.gif)
130
![](/Images/OutliningIndicators/None.gif)
131
![](/Images/OutliningIndicators/None.gif)
132
![](/Images/OutliningIndicators/None.gif)
133
![](/Images/OutliningIndicators/None.gif)
134
![](/Images/OutliningIndicators/None.gif)
135
![](/Images/OutliningIndicators/None.gif)
136
![](/Images/OutliningIndicators/None.gif)
137
![](/Images/OutliningIndicators/None.gif)
138
![](/Images/OutliningIndicators/None.gif)
139
![](/Images/OutliningIndicators/None.gif)
140
![](/Images/OutliningIndicators/None.gif)
141
![](/Images/OutliningIndicators/None.gif)
142
![](/Images/OutliningIndicators/None.gif)
143
![](/Images/OutliningIndicators/None.gif)
144
![](/Images/OutliningIndicators/None.gif)
145
![](/Images/OutliningIndicators/None.gif)
146
![](/Images/OutliningIndicators/None.gif)
147
![](/Images/OutliningIndicators/None.gif)
148
![](/Images/OutliningIndicators/None.gif)
149
![](/Images/OutliningIndicators/None.gif)
150
![](/Images/OutliningIndicators/None.gif)
151
![](/Images/OutliningIndicators/None.gif)
152
![](/Images/OutliningIndicators/None.gif)
153
![](/Images/OutliningIndicators/None.gif)
154
![](/Images/OutliningIndicators/None.gif)
155
![](/Images/OutliningIndicators/None.gif)
156
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
这个菜单只支持2级!
效果有些抖动,不知道大家有没有更好的方法来控制子菜单显示的位置!
源码下载:点击下载源码