制作一个类似XP的Explorer菜单，效果图如下：
图中所需有五个图形：
htm文件源码如下：如需要增加菜单，可简单复制，但需要修改红色的地方
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>一个类Explorer菜单</title>
<style type="text/css">
<!--
.Group {
font-family: "宋体";
font-size: 12px;
background-image: url(images/center.gif);
height: 22px;
}
.GroupLeft {
background-image: url(images/left.gif);
height: 22px;
width:6px;
}
.GroupRight {
background-image: url(images/right.gif);
height: 22px;
width:6px;
}
.MenuItem {
font-family: "宋体";
font-size: 12px;
cursor:hand;
}
-->
</style>
<script language="javascript">
var popUpWin=0;
function popUpWindow(URLStr, left, top, width, height)
{
if(popUpWin)
{
if(!popUpWin.closed) popUpWin.close();
}
popUpWin = 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+'');
}
function messageWindow(title, msg)
{
var width="300", height="125";
var left = (screen.width/2) - width/2;
var top = (screen.height/2) - height/2;
var 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;
var msgWindow = window.open("","msgWindow", styleStr);
var head = '<head><title>'+title+'</title></head>';
var body = '<center>'+msg+'<br><p><form><input type="button" value=" Done " onClick="self.close()"></form>';
msgWindow.document.write(head + body);
}
function OpenMenu(MenuID)
{
var obj = document.getElementById('Menu'+MenuID);
var grpobj=document.getElementById('Group'+MenuID);
current = (obj.style.display == 'none') ? '' : 'none';
if(current=='none')
{
grpobj.src ='images/downarrows_white.gif';
}
else
grpobj.src ='images/uparrows_white.gif';
obj.style.display = current;
}
</script>
</head>
<body>
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="GroupLeft"></td>
<td width="138" class="Group"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="85%" height="21">资料查询</td>
<td width="15%"><img src="images/uparrows_white.gif" width="16" height="16" id="Group1" onClick="OpenMenu('1')" style="cursor:hand"></td>
</tr>
</table></td>
<td class="GroupRight"></td>
</tr >
<tr id="Menu1" bgcolor="#F0F0F0">
<td></td>
<td><div class="MenuItem">
<li onMouseOver="this.style.color='#FF9933'" onMouseOut="this.style.color =''" onClick="messageWindow('Hello','Are you OK?')">查询用户</li>
<li onMouseOver="this.style.color='#FF9933'" onMouseOut="this.style.color =''" onClick="popUpWindow('index.htm',0,0,800,600)">合同查询</li>
<li onMouseOver="this.style.color='#FF9933'" onMouseOut="this.style.color =''">预付款查询</li>
<li onMouseOver="this.style.color='#FF9933'" onMouseOut="this.style.color =''">发展人查询</li>
</div>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
