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);
1<script src='Goody_Menu.js' type='text/javascript'></script>
2<link href="Goody_Menu.css" rel="stylesheet" type="text/css">
3
4<body onload="GenMenu()">
5测试菜单
6<div id=MenuContainer style='position:relative;top:1px;left:1px;heigth:31px;'></div>
7<div id=MenuItemContainer style='border:solid 0px #dedede;position:relative;top:1px;left:1px;heigth:31px;'></div>
8
9
10
11
12
13
14
15<div style='float:left;border:solid 1px green;position:relative;top:200px;left:1px;heigth:30px;'><div style="float:right;width:100px;border :solid 1px blue">111</div><div style="position:relative;left:102px;width:100px;border :solid 1px blue">222</div></div>
16
17<table border =1px width=100%><Tr><td>
18
19<span style="width:100px;border :solid 1px blue">111</span><span style="position:relative;left:102px;width:100px;border :solid 1px blue">222</span>
20
21</td></tr></table>
22</body>
这个菜单只支持2级！
效果有些抖动，不知道大家有没有更好的方法来控制子菜单显示的位置！
源码下载：点击下载源码
