 [JavaScript]制作一个类似XP的Explorer菜单 |
冷冰雨 发表于 2005/4/6 17:17:27 |
制作一个类似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>
|
阅读全文(2808) | 回复(0) | 编辑 | 精华 |
|
|
| « | December 2025 | » | | 日 | 一 | 二 | 三 | 四 | 五 | 六 | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | | | | |
|
| Blog信息 |
|
blog名称:
日志总数:13
评论数量:35
留言数量:0
访问次数:99042
建立时间:2005年1月11日 | |
|