用JS写了一个菜单

  1
  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.οnclick=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 );

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


源码下载： 点击下载源码