用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);

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


源码下载：点击下载源码