可拖动带动画的滑出式展开菜单代码(Js+Css实现)
时间：2011-03-22 来源：网页代码站
代码简介：
效果很不错的导航菜单，可用鼠标拖动位置，支持多级菜单分类，带动画效果的展开与关闭，JS+、CSS、Table三者结合共同打造，对CSS或JS不太懂的朋友也可以很轻易修改菜单，想信很多朋友会喜欢。
代码内容：
<html>
<head>
<title>可拖动带动画的滑出式展开菜单代码(Js+Css实现)_网页代码站(www.webdm.cn)</title>
</head>
<style>
body,td,a {font-size:9pt;color:black;text-decoration:none}
.normal {padding:2px}
.up {padding:1px;border:#888888 1px solid;background:#dddddd}
.down {padding:1px;border:dbdbdb 1px solid;background:dbdbdb}
.menuv {filter: revealTrans(transition=23,duration=0.5);padding:2px}
</style>
<body onmousemove="move()" onload=bodyload()>
<script>
function flashit(){if(!document.all)return;if (td123.style.borderColor=="black")
td123.style.borderColor="#999999";else td123.style.borderColor="black"}setInterval("flashit()",500)
function high(image){theobject=image,highlighting=setInterval("highlightit(theobject)",100)}function
low(image){clearInterval(highlighting),image.filters.alpha.opacity=50}function highlightit(cur2){if
(cur2.filters.alpha.opacity<100)cur2.filters.alpha.opacity+=20;else if(window.highlighting)
clearInterval (highlighting)}
//拖动
var over=false,down=false,divleft,divtop;function move(){if(down){plane.style.left=event.clientX-
divleft;plane.style.top=event.clientY-divtop;}}
//滑动
function bodyload()
{
if(plane.style.pixelTop!=0)
{
plane.style.pixelTop-=10
setTimeout('bodyload()',1)
}
}
//渐变
function Show(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "visible";
divid.filters.revealTrans.play();
}
function Hide(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "hidden";
divid.filters.revealTrans.play();
}
</script>
<div style="position:absolute;z-index:1;width:1; left: 0; top: 500" ID=plane
onmousedown="down=true;divleft=event.clientX-parseInt(plane.style.left);divtop=event.clientY-
parseInt(plane.style.top)" onmouseup="down=false">
<table id="td123" cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand"
cellpadding="0" bgcolor="f4f4f4">
<tr>
<td bgcolor="#cccccc" height="20" style="BORDER:#999999 1px solid;cursor:move">
<div align="center">网页代码站导航</div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this),Show(menu1)
" onMouseOut="this.className='normal',low(this),menu1.style.visibility='hidden'"
style="filter:alpha(opacity=50)"onMouseUp="this.className='up'" >
<div align="right">代码下载>></div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this),Show(menu2)" onMouseOut="this.className='normal',low
(this),menu2.style.visibility='hidden'" style="filter:alpha
(opacity=50)"onMouseUp="this.className='up'" >
<div align="right">网页特效>></div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)"
style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align="right">最新更新>></div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)"
style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align="right">下载排行>></div>
</td>
</tr>
</table>
<div id="menu1" style="position:absolute;top:24px;left:96px; z-index:1; visibility: hidden; width:
105"
onMouseOver=this.style.visibility='visible'
onMouseOut=this.style.visibility='hidden' class="menuv">
<table cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0"
bgcolor="f4f4f4" align="right">
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)"
style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align="center"><a href="http://www.webdm.cn">ASP源码</a></div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)"
style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align="center"><a href="http://www.cnblogs.com/">PHP源码</a></div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)"
style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align="center"><a href="http://www.cnblogs.com/">JSP源码</a></div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)"
style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align="center"><a href="http://www.cnblogs.com/">Jscript</a></div>
</td>
</tr>
</table>
</div>
<div id="menu2" style="position:absolute;top:45px;left:96; z-index:1; visibility: hidden; width:
105"
onMouseOver=this.style.visibility='visible'
onMouseOut=this.style.visibility='hidden' class="menuv">
<table cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0"
bgcolor="f4f4f4" align="right">
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)"
style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align="center"><a href="http://www.cnblogs.com/">菜单特效</a></div>
</td>
</tr>
<tr>
<td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)"
style="filter:alpha(opacity=50)"onMouseUp="this.className='up'">
<div align="center"><a href="http://www.webdm.cn">层和布局</a></div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的
代码！</p>
代码来自：http://www.webdm.cn/webcode/d2e4a8c1-edfd-4d66-b488-763e47f1d528.html
相关阅读 更多 +
