点击文字后菜单慢慢展开

2024-09-05 12:19:36

字体：大中小

来源：转载

供稿：网友

点击文字后才展开的菜单，实际上点击文字后展开的是一个层，层里面放的是一个表格，菜单是在表格里，通过这个例子你会明白JS是如何控制一个DIV层展开的，这是现在比较流行和通用的方法。

<html><head><title>点击文字让菜单层展开</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body topmargin="0" leftmargin="0" bgcolor="#FFFFFF" onclick="menuHide();"><script>document.onmousewheel=function(){status=event.wheelDelta;}</script><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style></style><script language=javascript>var run=0;var show=0;function menuRow(){  show=1;  run=1;  menu.style.pixelTop-=5;  if(menu.style.pixelTop>0)setTimeout('menuRow();','5');  else    run=0;}function menuShow(){  if(!run && !show)  {    menu.style.visibility='visible';menup.style.visibility='visible';    menu.style.pixelTop=200;    menuRow();  }}function menuHide(){  if(!run && show)  {    menu.style.visibility='hidden';menup.style.visibility='hidden';show=0;  }}</script><div style="overflow: hidden; left=404px; top:30px; height:160px; visibility:show; width:97px; z-index:1; position:absolute; visibility:hidden; border-left: 0px; border-right: 0px; border-top: 0px solid; border-bottom: 1px solid #FF0000; " id=menup> <div bgcolor="#FFFFFF" id=menu align=center style="position: absolute; width: 97px; height: 160px; z-index: 1; left: 0px; top: 200px; overflow: hidden; visibility: hidden; background-image: url('/images/menu_bg.gif'); border: 1 solid #FF0000">           <table width=93 cellpadding="0" cellspacing="4" style="position: relative; top: 1">            <tr>              <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; onclick="location='/'">关 于 我 们</td>            </tr>            <tr>              <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; onclick="location='/'">最 新 更 新</td>            </tr>            <tr>              <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; onclick="location='/jscss/'">网 页 特 效</td>            </tr>            <tr>              <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; onclick="location='/'">编 程 学 院</td>            </tr>            <tr>              <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; onclick="location='/'">最 后 更 新</td>            </tr><tr>              <td valign="middle" align="center" height="20" class=menuout onmouseover=this.className='menuover'; onmouseout=this.className='menuout'; onclick="location='/'">广 告 联 系</td>            </tr>          </table>        </div>          </div>查看菜单</body></html>

上一篇：酷似Windows的多级下拉菜单（仿FLASH）

下一篇：红白相间的CSS菜单