<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>JavaScript横向滑出的多级菜单</title>
<style>
*{padding:0;margin:0}
body{font:12pxVerdana,Arial,Helvetica}
#wrapper{width:750px;padding:25px;margin:0auto}
#leftcolumn{float:left;width:225px}
#rightcolumn{float:left;width:525px}
.dropdown{display:block;position:relative}
.dropdowndt{width:188px;border:2pxsolid#9ac1c9;padding:8px;font-weight:bold;cursor:pointer;background:url(images/header.gif)}
.dropdown.upperdd{border-bottom:none}
.dropdowndt:hover{background:url(images/header_over.gif)}
.dropdowndd{position:absolute;top:0;overflow:hidden;width:208px;display:none;background:#fff;opacity:0}
.dropdownul{width:204px;border:2pxsolid#9ac1c9;list-style:none}
.dropdownli{display:inline}
.dropdowna,.dropdowna:active,.dropdowna:visited{display:block;padding:5px;color:#333;text-decoration:none;background:#eaf0f2;width:194px}
.dropdowna:hover{background:#d9e1e4;color:#000}
.dropdown.underline{border-bottom:1pxsolid#b9d6dc}
</style>
<scripttype="text/javascript">
varDDSPEED=10;
varDDTIMER=15;
varOFFSET=-2;
varZINT=100;
functionddMenu(id,d){
varh=document.getElementById(id+'-ddheader');
varc=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}
elseif(!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);
}
}
functionddCollapse(c){
c.timer=setInterval(function(){ddSlide(c,-1)},DDTIMER);
}
functioncancelHide(id){
varh=document.getElementById(id+'-ddheader');
varc=document.getElementById(id+'-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if(c.offsetHeight<c.maxh){
c.timer=setInterval(function(){ddSlide(c,1)},DDTIMER);
}
}
functionddSlide(c,d){
varcurrh=c.offsetHeight;
vardist;
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);
}elseif(dist<1&&d!=1){
clearInterval(c.timer);
c.style.display='none';
}
}
</script>
</head>
<body>
<divid="wrapper">
<divid="leftcolumn">
<dlclass="dropdown">
<dtid="one-ddheader"class="upperdd"onmouseover="ddMenu('one',1)"onmouseout="ddMenu('one',-1)">我们首页</dt>
<ddid="one-ddcontent"onmouseover="cancelHide('one')"onmouseout="ddMenu('one',-1)">
<ul>
<li><ahref="#"class="underline">脚本主页</a></li>
<li><ahref="#"class="underline">网页特效</a></li>
<li><ahref="#">脚本下载</a></li>
</ul>
</dd>
</dl>
<dlclass="dropdown">
<dtid="two-ddheader"class="upperdd"onmouseover="ddMenu('two',1)"onmouseout="ddMenu('two',-1)">网站导航</dt>
<ddid="two-ddcontent"onmouseover="cancelHide('two')"onmouseout="ddMenu('two',-1)">
<ul>
<li><ahref="#"class="underline">ASP</a></li>
<li><ahref="#"class="underline">PHP</a></li>
<li><ahref="#"class="underline">.NET</a></li>
<li><ahref="#">网站留言</a></li>
</ul>
</dd>
</dl>
<dlclass="dropdown">
<dtid="three-ddheader"class="upperdd">最新下载</dt>
</dl>
<dlclass="dropdown">
<dtid="four-ddheader"onmouseover="ddMenu('four',1)"onmouseout="ddMenu('four',-1)">欢迎回来</dt>
<ddid="four-ddcontent"onmouseover="cancelHide('four')"onmouseout="ddMenu('four',-1)">
<ul>
<li><ahref="#"class="underline">欢迎再来</a></li>
<li><ahref="#">慢走，不送</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>
|
Copyright©2000-2022