[Javascript]一个类XP Explorer的菜单制作

制作一个类似XP的Explorer菜单，效果图如下：
![](http://dev.csdn.net/article/57/C:/Documents and Settings\Administrator\桌面\1.jpg)
图中所需有五个图形：
![](http://dev.csdn.net/article/57/C:/Documents and Settings\Administrator\My Documents\My Web Sites\images\left.gif) ![](http://dev.csdn.net/article/57/C:/Documents and Settings\Administrator\My Documents\My Web Sites\images\center.gif) ![](http://dev.csdn.net/article/57/C:/Documents and Settings\Administrator\My Documents\My Web Sites\images\right.gif) ![](http://dev.csdn.net/article/57/C:/Documents and Settings\Administrator\My Documents\My Web Sites\images\downarrows_white.gif) ![](http://dev.csdn.net/article/57/C:/Documents and Settings\Administrator\My Documents\My Web Sites\images\uparrows_white.gif)

htm文件源码如下：如需要增加菜单，可简单复制，但需要修改红色的地方

 1<html>
 2<head>
 3<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
 4<title>一个类Explorer菜单</title>
 5<style type="text/css">   
 6<!--   
 7.Group {   
 8font-family: "宋体";   
 9font-size: 12px;   
10background-image: url(images/center.gif);   
11height: 22px;   
12}   
13.GroupLeft {   
14background-image: url(images/left.gif);   
15height: 22px;   
16width:6px;   
17}   
18.GroupRight {   
19background-image: url(images/right.gif);   
20height: 22px;   
21width:6px;   
22}   
23.MenuItem {   
24font-family: "宋体";   
25font-size: 12px;   
26cursor:hand;   
27}   
28\-->   
29</style>
30<script language="javascript">   
31var popUpWin=0;   
32function popUpWindow(URLStr, left, top, width, height)   
33{   
34if(popUpWin)   
35{   
36if(!popUpWin.closed) popUpWin.close();   
37}   
38popUpWin = open(URLStr, 'popUpWin', 'toolbar=no,location=no,directories=no,status=no,menub ar=no,scrollbar=no,resizable=no,copyhistory=yes,width='+width+',height='+height+',left='+left+', top='+top+',screenX='+left+',screenY='+top+'');   
39}   
40function messageWindow(title, msg)   
41{   
42var width="300", height="125";   
43var left = (screen.width/2) - width/2;   
44var top = (screen.height/2) - height/2;   
45var styleStr = 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbar=no,resizable=no,copyhistory=yes,width='+width+',height='+height+',left='+left+',top='+top+',screenX='+left+',screenY='+top;   
46var msgWindow = window.open("","msgWindow", styleStr);   
47var head = '<head><title>'+title+'</title></head>';   
48var body = '<center>'+msg+'<br><p><form><input type="button" value=" Done " onClick="self.close()"></form>';   
49msgWindow.document.write(head + body);   
50}   
51function OpenMenu(MenuID)   
52{   
53var obj = document.getElementById('Menu'+MenuID);   
54var grpobj=document.getElementById('Group'+MenuID);   
55current = (obj.style.display == 'none') ? '' : 'none';   
56if(current=='none')   
57{   
58grpobj.src ='images/downarrows_white.gif';   
59}   
60else   
61grpobj.src ='images/uparrows_white.gif';   
62obj.style.display = current;   
63}   
64</script>
65</head>
66<body>
67<table border="0" cellpadding="0" cellspacing="0" width="150">
68<tr>
69<td class="GroupLeft"> </td>
70<td class="Group" width="138"> <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
71<tr>
72<td height="21" width="85%">资料查询</td>
73<td width="15%"><img height="16" id="  Group1  " onclick="OpenMenu(  '1  ')" src="images/uparrows_white.gif" style="cursor:hand" width="16"/></td>
74</tr>
75</table></td>
76<td class="GroupRight"> </td>
77</tr>
78<tr bgcolor="#F0F0F0" id="  Menu1  ">
79<td> </td>
80<td><div class="MenuItem">
81<li onclick="messageWindow('Hello','Are you OK?')" onmouseout="this.style.color =''" onmouseover="this.style.color='#FF9933'">查询用户</li>
82<li onclick="popUpWindow('index.htm',0,0,800,600)" onmouseout="this.style.color =''" onmouseover="this.style.color='#FF9933'">合同查询</li>
83<li onmouseout="this.style.color =''" onmouseover="this.style.color='#FF9933'">预付款查询</li>
84<li onmouseout="this.style.color =''" onmouseover="this.style.color='#FF9933'">发展人查询</li>
85</div>
86</td>
87<td> </td>
88</tr>
89<tr>
90<td> </td>
91<td> </td>
92<td> </td>
93</tr>
94</table>
95</body>
96</html>