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

博客介绍了制作类似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">
<!--
.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;
 background-repeat:no-repeat
}
.GroupRight {
 background-image: url(images/right.gif);
 height: 22px;
 width:6px;
 background-repeat:no-repeat
}
.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" 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>

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值