動感伸縮、關閉的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   id="iwvjtn8m0"   class="main"><div   class="iwvjtn8m0"   id="basic-accordian" ><div   class="iwvjtn8m0"   id="test-header" class="accordion_headings" >開始</div><div   class="iwvjtn8m0"   id="test-content">    <div   id="iwvjtn8m0"   class="accordion_child"> <ul><li>網頁特效</li> <li>最新源碼</li></ul>   </div>      </div>     <div   class="iwvjtn8m0"   id="test1-header" class="accordion_headings" >網頁特效</div>  <div   class="iwvjtn8m0"   id="test1-content">    <div   id="iwvjtn8m0"   class="accordion_child"><ul><li>CSS布局</li><li>菜單導航</li><li>滑動門</li></ul></div></div>          <div   class="iwvjtn8m0"   id="test7-header" class="accordion_headings" >ASP源碼</div><div   class="iwvjtn8m0"   id="test7-content">    <div   id="iwvjtn8m0"   class="accordion_child"><ul>  <li>論壇社區</li>  <li>新聞文章</li><li>聊天留言</li></ul></div></div>          <div   class="iwvjtn8m0"   id="test8-header" class="accordion_headings" >客服中心</div><div   class="iwvjtn8m0"   id="test8-content">    <div   id="iwvjtn8m0"   class="accordion_child"><ul>  <li>常見問題</li>  <li>在線留言</li><li>聯系我們</li></ul></div></div></div></div></body></html>

上一篇：當前項帶下劃線的標準CSS菜單

下一篇：JS+CSS多風格自由拖動的菜單窗口