代码简介:动感伸缩、关闭的JS+CSS菜单,配合黑色的背景,看上去很酷,有点像jQuery插件打造的效果,但它却是JavaSCript+CSS实现的哦。
代码内容:
<!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> <title>很是动感的一款js伸缩、关闭菜单_网页代码站(www.webdm.cn)</title> <script type=text/javascript> function $(d){ return document.getElementById(d); } function dsp(d,v){ if(v==undefined){ return d.style.display; }else{ d.style.display=v; } } function sh(d,v){ if(v==undefined){ if(dsp(d)!='none'&& dsp(d)!=''){ return d.offsetHeight; } viz = d.style.visibility; d.style.visibility = 'hidden'; o = dsp(d); dsp(d,'block'); r = parseInt(d.offsetHeight); dsp(d,o); d.style.visibility = viz; return r; }else{ d.style.height=v; } } s=7; t=10; function ct(d){ d = $(d); if(sh(d)>0){ v = Math.round(sh(d)/d.s); v = (v<1) ? 1 :v ; v = (sh(d)-v); sh(d,v+'px'); d.style.opacity = (v/d.maxh); d.style.filter= 'alpha(opacity='+(v*100/d.maxh)+');'; }else{ sh(d,0); dsp(d,'none'); clearInterval(d.t); } } function et(d){ d = $(d); if(sh(d)<d.maxh){ v = Math.round((d.maxh-sh(d))/d.s); v = (v<1) ? 1 :v ; v = (sh(d)+v); sh(d,v+'px'); d.style.opacity = (v/d.maxh); d.style.filter= 'alpha(opacity='+(v*100/d.maxh)+');'; }else{ sh(d,d.maxh); clearInterval(d.t); } } function cl(d){ if(dsp(d)=='block'){ clearInterval(d.t); d.t=setInterval('ct("'+d.id+'")',t); } } function ex(d){ if(dsp(d)=='none'){ dsp(d,'block'); d.style.height='0px'; clearInterval(d.t); d.t=setInterval('et("'+d.id+'")',t); } } function cc(n,v){ s=n.className.split(/\s+/); for(p=0;p<s.length;p++){ if(s[p]==v+n.tc){ s.splice(p,1); n.className=s.join(' '); break; } } } function Accordian(d,s,tc){ l=$(d).getElementsByTagName('div'); c=[]; for(i=0;i<l.length;i++){ h=l[i].id; if(h.substr(h.indexOf('-')+1,h.length)=='content'){c.push(h);} } sel=null; for(i=0;i<l.length;i++){ h=l[i].id; if(h.substr(h.indexOf('-')+1,h.length)=='header'){ d=$(h.substr(0,h.indexOf('-'))+'-content'); d.style.display='none'; d.style.overflow='hidden'; d.maxh =sh(d); d.s=(s==undefined)? 7 : s; h=$(h); h.tc=tc; h.c=c; h.onclick = function(){ for(i=0;i<this.c.length;i++){ cn=this.c[i]; n=cn.substr(0,cn.indexOf('-')); if((n+'-header')==this.id){ ex($(n+'-content')); n=$(n+'-header'); cc(n,'__'); n.className=n.className+' '+n.tc; }else{ cl($(n+'-content')); cc($(n+'-header'),''); } } } if(h.className.match(/selected+/)!=undefined){ sel=h;} } } if(sel!=undefined){sel.onClick();} } </script> <style type="text/css"> <!-- body{ font-size: 12px; color: #999999; background-color: #000000; font-family: Arial, Helvetica, sans-serif; text-transform: capitalize; } * { margin: 0px; padding: 0px; border: 0px;list-style:none;} #basic-accordian{ 20%; z-index:2; margin-top: 2%; border-top-style: solid; border-top-color: #999999; border-bottom-style: solid; border-bottom-color: #666666; padding-top: 15px; padding-bottom: 15px; margin-bottom: 2%; }/*菜单背景*/ .accordion_headings{ padding:2px; color:#FFFFFF; cursor:pointer; font-weight:bold; font-size: 14px; line-height: 25px; letter-spacing: 1px; }/*菜单分类行*/ .accordion_headings:hover{ } .accordion_child{ padding-left: 20px; padding-bottom: 8px; } .accordion_child ul{} .accordion_child ul li{ font-size: 12px; display: block; line-height: 20px; display:block; } .accordion_child ul li a{ text-decoration: none; color: #666666; } .accordion_child ul li a:hover{ color: #FFFFFF; } .header_highlight{ background-color: #000000; color: #FF0099; }/*当前显示菜单分类样式*/ /*菜单样式结束*/ .main { margin-top: 2%; 96%; margin-right: auto; margin-left: auto; } --> </style> </head> <body onload="new Accordian('basic-accordian',5,'header_highlight');"> <div class="main"> <div id="basic-accordian" ><!--菜单开始--> <div id="test-header" class="accordion_headings" >网页代码站</div> <div id="test-content"> <div class="accordion_child"> <ul><li><a href="/">网页特效</a></li> <li><a href="http://www.webdm.cn">最新源码</a></li> </ul> </div> </div> <div id="test1-header" class="accordion_headings" >网页特效</div> <div id="test1-content"> <div class="accordion_child"> <ul><li><a href="//www.webdm.cn">CSS布局</a></li> <li><a href="http://www.webdm.cn">菜单导航</a></li> <li><a href="/">滑动门</a></li> </ul> </div></div> <div id="test7-header" class="accordion_headings" >ASP源代码</div> <div id="test7-content"> <div class="accordion_child"> <ul> <li><a href="http:">论坛社区</a></li> <li><a href="/">新闻文章</a></li> <li><a href="/">聊天留言</a></li> </ul> </div></div> <div id="test8-header" class="accordion_headings" >客服中心</div> <div id="test8-content"> <div class="accordion_child"> <ul> <li><a href="http://www.webdm.cn">常见问题</a></li> <li><a href="/">在线留言</a></li> <li><a href="http://www.webdm.cn">联系我们</a></li> </ul> </div></div> </div><!--菜单结束--> </div><!--main结束--> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/560d16e9-a31b-4414-a1c8-b16a291c23f7.html