html与js二级菜单横排,JavaScript实现横向滑出的多级菜单效果

本文实例讲述了JavaScript实现横向滑出的多级菜单效果。分享给大家供大家参考。具体如下：

这是一款JavaScript横向滑出的多级菜单，只用鼠标放上就可以动画出现二级菜单，整体设计精美，大气，博客上也可以用哦。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

JavaScript横向滑出的多级菜单

* {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}

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';

}

}

我们首页

• 脚本主页
• 网页特效
• 脚本下载

网站导航

• ASP
• PHP
• .NET
• 网站留言

最新下载

欢迎回来

• 欢迎再来
• 慢走，不送

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