您正在使用IPV4(18.205.176.39)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头       深圳小产权房      

【腾讯云】热门云产品首单特惠秒杀,2核2G云服务器45元/年      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 儿童节 15
2022年 端午节 17
2023年 元 旦 229
2023年 春 节 250
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
JavaScript实现横向滑出的多级菜单效果
内容摘要: !DOCTYPEhtmlPUBLIC'-//W3C//DTDXHTML1.0Transitional//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'htmlxmlns='http://www.w3.org/1999/xhtml'headmetahttp-equiv='Content-......
<!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>

上一篇:JS+CSS相对定位实现的下拉菜单 下一篇:Ajax实现上传图像功能的示例详解
发布日期:2022/4/10
手机扫二维码直达本页
发布时间:17:18:28
点击:391
录入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.2.1.220509(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022