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

最新推荐文章于 2025-07-29 20:25:09 发布

顺欣同创

最新推荐文章于 2025-07-29 20:25:09 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xp function class border html

本文链接：https://blog.youkuaiyun.com/xujh/article/details/222057

博客介绍了制作类似XP的Explorer菜单的方法，给出了效果图，指出图中需要五个图形，还展示了htm文件源码，并说明若要增加菜单，简单复制后修改特定位置即可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

制作一个类似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">

</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" ondblclick="OpenMenu('1')">资料查询</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>