一个灵活自由的JS下拉菜单[原帖：http://www.javaeye.com/wiki/topic/355725]

最近做个项目需要使用一个菜单，下拉菜单那种，无奈发现菜单项太多，但项目时间很紧，从网上找了些菜单的实现，都不是很理想，主要是菜单项目太多了，而且总是那么多不自由，所以决定自己写个能够自由灵活使用的菜单，并且能容纳下尽可能多的菜单项。要容纳很多的菜单项（比如上百个，不能用做成树），不能做成纯粹下拉的，只能做成矩阵排列那种了。但同时为了灵活，所以采用DIV才装菜单项，可以自由做成自己想要的样子。其中JS代码如下：

Java代码

1.   
2. function Menu(menu){   
3.     this.isIE = !!(window.attachEvent &&navigator.userAgent.indexOf('Opera') === -1);//判断是否是IE   
4.     this.y = function(e){   
5.         var offset=e.offsetTop;   
6.         if(e.offsetParent!=null) offset+=this.y(e.offsetParent);   
7.         return offset;   
8.     }   
9.     this.x = function(e){   
10.         var offset=e.offsetLeft;   
11.         if(e.offsetParent!=null) offset+=this.x(e.offsetParent);   
12.         return offset;   
13.     }   
14.     this.$ = function(id){   
15.         return document.getElementById(id);   
16.     }   
17.     this.$$ = function(obj,name){   
18.         var rs = new Array();   
19.         var childNodes = obj.childNodes;   
20.         for(var i = 0 ;i<childNodes.length;i++){   
21.             if(childNodes[i].nodeName == name){   
22.                 rs.push(childNodes[i]);   
23.             }   
24.         }   
25.         return rs;   
26.     }   
27.     this.root = this.$(menu);   
28.     this.init();   
29. }   
30. Menu.prototype.init = function(){   
31.     this.bind(this.root);   
32. }   
33. Menu.prototype.bind = function(root){   
34.     var liNodes = this.$$(root,'LI');   
35.     for(var i = 0;i<liNodes.length;i++){   
36.         var liNode = liNodes[i];   
37.         if(liNode.style.display==''||liNode.style.display=='none'){   
38.             if(this.isIE){   
39.                 liNode.style.display = 'inline';   
40.             }   
41.             else {   
42.                 liNode.style.display = 'inline-block';   
43.             }   
44.         }   
45.         var divs = this.$$(liNode,'DIV');   
46.         for(var j=0;j<divs.length;j++){   
47.             var div = divs[j];   
48.             div.style.display = 'none';   
49.             if(div.style.width==''){   
50.                 div.style.maxWidth = this.root.style.width;   
51.             }   
52.             div.style.position = 'absolute';   
53.             if(this.isIE){   
54.                 div.style.left = this.x(liNode);   
55.                 div.style.top = this.y(liNode) + liNode.offsetHeight;   
56.             }   
57.                
58.             var uls = this.$$(div,'UL');   
59.             for(var  k =0;k<uls.length;k++){   
60.                 this.bind(uls[k]);   
61.             }   
62.         }   
63.         liNode.$$ = function(name){   
64.             var rs = new Array();   
65.             var childNodes = this.childNodes;   
66.             for(var i = 0 ;i<childNodes.length;i++){   
67.                 if(childNodes[i].nodeName == name){   
68.                     rs.push(childNodes[i]);   
69.                 }   
70.             }   
71.             return rs;   
72.         }   
73.         liNode.onmouseover = function (){   
74.             var ds = this.$$('DIV');   
75.             for(var j=0;j<ds.length;j++){   
76.                 var div = ds[j];   
77.                 div.style.display = 'block';   
78.             }   
79.         }   
80.         liNode.onmouseout = function (){   
81.             var ds = this.$$('DIV');   
82.             for(var j=0;j<ds.length;j++){   
83.                 var div = ds[j];   
84.                 div.style.display = 'none';   
85.             }   
86.         }   
87.     }   
88. }  

	
	function Menu(menu){
		this.isIE = !!(window.attachEvent &&navigator.userAgent.indexOf('Opera') === -1);//判断是否是IE
		this.y = function(e){
			var offset=e.offsetTop;
			if(e.offsetParent!=null) offset+=this.y(e.offsetParent);
			return offset;
		}
		this.x = function(e){
			var offset=e.offsetLeft;
			if(e.offsetParent!=null) offset+=this.x(e.offsetParent);
			return offset;
		}
		this.$ = function(id){
			return document.getElementById(id);
		}
		this.$$ = function(obj,name){
			var rs = new Array();
			var childNodes = obj.childNodes;
			for(var i = 0 ;i<childNodes.length;i++){
				if(childNodes[i].nodeName == name){
					rs.push(childNodes[i]);
				}
			}
			return rs;
		}
		this.root = this.$(menu);
		this.init();
	}
	Menu.prototype.init = function(){
		this.bind(this.root);
	}
	Menu.prototype.bind = function(root){
		var liNodes = this.$$(root,'LI');
		for(var i = 0;i<liNodes.length;i++){
			var liNode = liNodes[i];
			if(liNode.style.display==''||liNode.style.display=='none'){
				if(this.isIE){
					liNode.style.display = 'inline';
				}
				else {
					liNode.style.display = 'inline-block';
				}
			}
			var divs = this.$$(liNode,'DIV');
			for(var j=0;j<divs.length;j++){
				var div = divs[j];
				div.style.display = 'none';
				if(div.style.width==''){
					div.style.maxWidth = this.root.style.width;
				}
				div.style.position = 'absolute';
				if(this.isIE){
					div.style.left = this.x(liNode);
					div.style.top = this.y(liNode) + liNode.offsetHeight;
				}
				
				var uls = this.$$(div,'UL');
				for(var  k =0;k<uls.length;k++){
					this.bind(uls[k]);
				}
			}
			liNode.$$ = function(name){
				var rs = new Array();
				var childNodes = this.childNodes;
				for(var i = 0 ;i<childNodes.length;i++){
					if(childNodes[i].nodeName == name){
						rs.push(childNodes[i]);
					}
				}
				return rs;
			}
			liNode.onmouseover = function (){
				var ds = this.$$('DIV');
				for(var j=0;j<ds.length;j++){
					var div = ds[j];
					div.style.display = 'block';
				}
			}
			liNode.onmouseout = function (){
				var ds = this.$$('DIV');
				for(var j=0;j<ds.length;j++){
					var div = ds[j];
					div.style.display = 'none';
				}
			}
		}
	}

将以上JS做成一个JS文件链接进HTML文件中，一个DEMO如下：

Html代码

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2. <html xmlns="http://www.w3.org/1999/xhtml">  
3. <head>  
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
5. <title>无标题文档</title>  
6. <script src="Menu.js" type="text/javascript"></script>  
7. </head>  
8.   
9. <body>  
10. <ul id="nav" style="width:600px;">  
11.     <li style="background-color:#F11111;">  
12.         <span>菜单一</span>  
13.         <div style="background-color:#666;">菜单内容菜单内容菜单内容一菜单内容菜单内容菜单内容一菜单内容菜单内容菜单内容一菜单内容菜单内容菜单内容一</div>  
14.     </li>  
15.     <li style="background-color:#CCC;">  
16.         <span>菜单二</span>  
17.         <div style="background-color:#666;">  
18.             <ul>  
19.                 <li style="display:inherit">二级菜单</li>  
20.                 <li style="display:inherit">二级菜单</li>  
21.                 <li style="display:inherit">二级菜单</li>  
22.                 <li style="display:inherit">二级菜单</li>  
23.                 <li style="display:inherit">  
24.                 <span>二级菜单</span>  
25.                 <div style="background-color:#666; width:300px;">  
26.                     <ul>  
27.                         <li >三级菜单</li>  
28.                         <li >三级菜单</li>  
29.                         <li >三级菜单</li>  
30.                         <li >三级菜单</li>  
31.                         <li >三级菜单</li>  
32.                     </ul>  
33.                 </div>  
34.                 </li>  
35.             </ul>  
36.         </div>  
37.     </li>  
38.     <li style="background-color:#CCC;">  
39.         <span>菜单三</span>  
40.         <div style="background-color:#666;">菜单内容菜单内容菜单内容三</div>  
41.     </li>  
42. </ul>  
43. <script language="javascript">  
44.     new Menu('nav');   
45. </script>  
46. </body>  
47. </html>  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="Menu.js" type="text/javascript"></script>
</head>

<body>
<ul id="nav" style="width:600px;">
	<li style="background-color:#F11111;">
    	<span>菜单一</span>
        <div style="background-color:#666;">菜单内容菜单内容菜单内容一菜单内容菜单内容菜单内容一菜单内容菜单内容菜单内容一菜单内容菜单内容菜单内容一</div>
    </li>
    <li style="background-color:#CCC;">
    	<span>菜单二</span>
        <div style="background-color:#666;">
        	<ul>
                <li style="display:inherit">二级菜单</li>
                <li style="display:inherit">二级菜单</li>
                <li style="display:inherit">二级菜单</li>
                <li style="display:inherit">二级菜单</li>
                <li style="display:inherit">
                <span>二级菜单</span>
                <div style="background-color:#666; width:300px;">
                    <ul>
                        <li >三级菜单</li>
                        <li >三级菜单</li>
                        <li >三级菜单</li>
                        <li >三级菜单</li>
                        <li >三级菜单</li>
                    </ul>
                </div>
                </li>
            </ul>
        </div>
    </li>
    <li style="background-color:#CCC;">
    	<span>菜单三</span>
        <div style="background-color:#666;">菜单内容菜单内容菜单内容三</div>
    </li>
</ul>
<script language="javascript">
	new Menu('nav');
</script>
</body>
</html>

主要的灵活之处在于没有写死CSS，你可以自己配置CSS，想要什么效果都可以，可以做并排菜单，或者下拉的，或者其它你想要的。