Js向上展开半透明菜单代码
代码简介:
向上展开的半透明菜单,展开菜单后是可以看到背景的哦,透明度自己设置一下,风格有点类似XP系统的右键菜单一样,链接颜色什么的你需要自己修改一下,以适合你的网页风格。
代码内容:
<HTML> <HEAD> <title>Js向上展开半透明菜单代码_网页代码站(www.webdm.cn)</title> <STYLE> body{ background:url(http://www.webdm.cn/images/20090919/bgdemo3.jpg); } .menuover { BORDER-RIGHT: #1a71e6 1px solid; BORDER-TOP: #1a71e6 1px solid; BORDER-LEFT: #1a71e6 1px solid; CURSOR: hand; BORDER-BOTTOM: #1a71e6 1px solid; BACKGROUND-COLOR: #eaf2fd } .menuout { CURSOR: hand } TD { FONT-SIZE: 12px; COLOR: #1a71e6;TEXT-DECORATION: none } A { FONT-SIZE: 12px; COLOR: #1a71e6; ‘TEXT-DECORATION: none } </STYLE> <SCRIPT> var moveStep = 15; // 移动单位 var moveTime = 10; //移动时间 function MoveMenuBox() { if(MenuBox.doing) { clearInterval(MenuBox.doing) } moveStep *= -1 MenuBox.doing = setInterval("DoMoveAction()",moveTime) } function DoMoveAction() { var judger = MenuBox.style.pixelTop + moveStep; if(moveStep>0) { if(judger <= MenuBox.parentElement.offsetHeight) { MenuBox.style.pixelTop = judger } else { MenuBox.style.pixelTop = MenuBox.parentElement.offsetHeight; clearInterval(MenuBox.doing); MenuBox.doing = false; } } else { if(judger >= 0) { MenuBox.style.pixelTop = judger } else { MenuBox.style.pixelTop = 0; clearInterval(MenuBox.doing); MenuBox.doing = false; } } } </SCRIPT> </HEAD> <BODY> <TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD width="100%"> <DIV style="OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 100%"> <TABLE id=MenuBox style="BORDER-RIGHT: #1a71e6 1px solid; BORDER-TOP: #1a71e6 1px solid; VISIBILITY: hidden; BORDER-LEFT: #1a71e6 20px solid; BORDER-BOTTOM: #1a71e6 1px solid; POSITION: relative" cellSpacing=4 cellPadding=0 width=130> <TBODY> <TR> <TD class=menuout onmouseover="this.className='menuover';" onmouseout="this.className='menuout';" vAlign=center align=middle height=20>关于我们</TD></TR> <TR> <TD class=menuout onmouseover="this.className='menuover';" onmouseout="this.className='menuout';" vAlign=center align=middle height=20>广告服务</TD></TR> <TR> <TD class=menuout onmouseover="this.className='menuover';" onmouseout="this.className='menuout';" vAlign=center align=middle height=20>用户留言</TD></TR> <TR> <TD class=menuout onmouseover="this.className='menuover';" onmouseout="this.className='menuout';" vAlign=center align=middle height=20>下载排行</TD></TR> <TR> <TD class=menuout onmouseover="this.className='menuover';" onmouseout="this.className='menuout';" vAlign=center align=middle height=20>最新更新</TD></TR> <TR> <TD class=menuout onmouseover="this.className='menuover';" onmouseout="this.className='menuout';" vAlign=center align=middle height=20>网页特效</TD></TR> <TR> <TD class=menuout onmouseover="this.className='menuover';" onmouseout="this.className='menuout';" vAlign=center align=middle height=20>源码下载</TD></TR> <TR> <TD class=menuout onmouseover="this.className='menuover';" onmouseout="this.className='menuout';" vAlign=center align=middle height=20>网页代码站</TD></TR></TBODY></TABLE></DIV></TD></TR> <TR> <TD width="100%"> <TABLE id=judgerBox height=29 cellSpacing=0 cellPadding=0 width=130> <TBODY> <TR> <TD style="FONT-SIZE: 6px" vAlign=center align=middle width=128 bgColor=#ffffff height=4></TD></TR> <TR> <TD style="BORDER-RIGHT: #ffffff 1px outset; BORDER-TOP: #ffffff 1px outset; BORDER-LEFT: #ffffff 1px outset; CURSOR: hand; COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px outset; BACKGROUND-COLOR: #1a71e6" onclick=MoveMenuBox() vAlign=center align=middle width=128 height=25>打开菜单</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> <SCRIPT> function window.onload() { MenuBox.style.pixelTop = MenuBox.parentElement.offsetHeight; MenuBox.style.visibility = "visible" } </SCRIPT> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/7bd9ac64-22ba-4c2f-8901-3c0c0bb3a11a.html