JavaScript实现横向滑出的多级菜单效果

本文实例讲述了JavaScript实现横向滑出的多级菜单效果。分享给大家供大家参考。具体如下：
这是一款JavaScript横向滑出的多级菜单，只用鼠标放上就可以动画出现二级菜单，整体设计精美，大气，博客上也可以用哦。
运行效果截图如下：

在线演示地址如下：
http://demo.jb51.net/js/2015/js-hx-show-menu-style-demo/
具体代码如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JavaScript横向滑出的多级菜单</title><style>* {padding:0; margin:0}body {font:12px Verdana, Arial, Helvetica}#wrapper {width:750px; padding:25px; margin:0 auto}#leftcolumn {float:left; width:225px}#rightcolumn {float:left; width:525px}.dropdown {display:block; position:relative}.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url（images/header.gif）}.dropdown .upperdd {border-bottom:none}.dropdown dt:hover {background:url（images/header_over.gif）}.dropdown dd {position:absolute; top:0; overflow:hidden; width:208px; display:none; background:#fff; opacity:0}.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none}.dropdown li {display:inline}.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}.dropdown a:hover {background:#d9e1e4; color:#000}.dropdown .underline {border-bottom:1px solid #b9d6dc}</style><script type="text/javascript">var DDSPEED = 10;var DDTIMER = 15;var OFFSET = -2;var ZINT = 100;function ddMenu（id,d）{ var h = document.getElementById（id + "-ddheader"）; var c = document.getElementById（id + "-ddcontent"）; clearInterval（c.timer）; if（d == 1）{clearTimeout（h.timer）;c.style.display = "block";if（c.maxh && c.maxh <= c.offsetHeight）{return}else if（！c.maxh）{ c.style.left = （h.offsetWidth + OFFSET） + "px"; c.style.height = "auto"; c.maxh = c.offsetHeight; c.style.height = "0px";}ZINT = ZINT + 1;c.style.zIndex = ZINT;c.timer = setInterval（function（）{ddSlide（c,1）},DDTIMER）; }else{h.timer = setTimeout（function（）{ddCollapse（c）},50）; }}function ddCollapse（c）{ c.timer = setInterval（function（）{ddSlide（c,-1）},DDTIMER）;}function cancelHide（id）{ var h = document.getElementById（id + "-ddheader"）; var c = document.getElementById（id + "-ddcontent"）; clearTimeout（h.timer）; clearInterval（c.timer）; if（c.offsetHeight < c.maxh）{c.timer = setInterval（function（）{ddSlide（c,1）},DDTIMER）; }}function ddSlide（c,d）{ var currh = c.offsetHeight; var dist; if（d == 1）{dist = Math.round（（c.maxh - currh） / DDSPEED）; }else{dist = Math.round（currh / DDSPEED）; } if（dist <= 1 && d == 1）{dist = 1; } c.style.height = currh + （dist * d） + "px"; c.style.opacity = currh / c.maxh; c.style.filter = "alpha（opacity=" + （currh * 100 / c.maxh） + "）"; if（currh > （c.maxh - 2） && d == 1）{clearInterval（c.timer）; }else if（dist < 1 && d ！= 1）{clearInterval（c.timer）;c.style.display = "none"; }}</script></head><body><div id="wrapper"><div id="leftcolumn"> <dl class="dropdown"><dt id="one-ddheader" class="upperdd" onmouseover="ddMenu（"one",1）" onmouseout="ddMenu（"one",-1）">我们首页</dt><dd id="one-ddcontent" onmouseover="cancelHide（"one"）" onmouseout="ddMenu（"one",-1）"> <ul><li><a href="#" class="underline">脚本主页</a></li><li><a href="#" class="underline">网页特效</a></li><li><a href="#">脚本下载</a></li> </ul></dd> </dl> <dl class="dropdown"><dt id="two-ddheader" class="upperdd" onmouseover="ddMenu（"two",1）" onmouseout="ddMenu（"two",-1）">网站导航</dt><dd id="two-ddcontent" onmouseover="cancelHide（"two"）" onmouseout="ddMenu（"two",-1）"> <ul><li><a href="#" class="underline">ASP</a></li><li><a href="#" class="underline">PHP</a></li><li><a href="#" class="underline">.NET</a></li><li><a href="#">网站留言</a></li> </ul></dd> </dl> <dl class="dropdown"><dt id="three-ddheader" class="upperdd">最新下载</dt> </dl> <dl class="dropdown"><dt id="four-ddheader" onmouseover="ddMenu（"four",1）" onmouseout="ddMenu（"four",-1）">欢迎回来</dt><dd id="four-ddcontent" onmouseover="cancelHide（"four"）" onmouseout="ddMenu（"four",-1）"> <ul><li><a href="#" class="underline">欢迎再来</a></li><li><a href="#">慢走，不送</a></li> </ul></dd> </dl></div></div></body></html>

希望本文所述对大家的JavaScript程序设计有所帮助。