动感伸缩、关闭的JS+CSS菜单

2024-09-05 12:20:00

字体：大中小

来源：转载

供稿：网友

动感伸缩、关闭的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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>动感伸缩、关闭的JS+CSS菜单</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"></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>网页特效</li> <li>最新源码</li></ul>   </div>      </div>     <div id="test1-header" class="accordion_headings" >网页特效</div>  <div id="test1-content">    <div class="accordion_child"><ul><li>CSS布局</li><li>菜单导航</li><li>滑动门</li></ul></div></div>          <div id="test7-header" class="accordion_headings" >ASP源码</div><div id="test7-content">    <div class="accordion_child"><ul>  <li>论坛社区</li>  <li>新闻文章</li><li>聊天留言</li></ul></div></div>          <div id="test8-header" class="accordion_headings" >客服中心</div><div id="test8-content">    <div class="accordion_child"><ul>  <li>常见问题</li>  <li>在线留言</li><li>联系我们</li></ul></div></div></div></div></body></html>

上一篇：当前项带下划线的标准CSS菜单

下一篇：JS+CSS多风格自由拖动的菜单窗口