导航

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

Posted on 2004-12-20 16:39  xujh  阅读(615)  评论(0编辑  收藏  举报
制作一个类似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>