日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

模板無(wú)憂

每日更新|TOP排行榜|Tag標(biāo)簽|充值

無(wú)憂首頁(yè) 網(wǎng)頁(yè)模板程序模板建站教程視頻教程網(wǎng)頁(yè)特效圖標(biāo)素材字體下載站長(zhǎng)工具站長(zhǎng)問(wèn)答

網(wǎng)頁(yè)特效代碼模板無(wú)憂>網(wǎng)頁(yè)特效>菜單導(dǎo)航特效代碼>

收藏分享查看評(píng)論菜單導(dǎo)航

動(dòng)感伸縮、關(guān)閉的JS+CSS菜單_菜單導(dǎo)航特效

查看演示效果

特效Tag：CSS菜單豎向菜單垂直添加

動(dòng)感伸縮、封閉的JS+CSS菜單，配合玄色的背景，看上往很酷，有點(diǎn)像jQuery插件打造的效果，但它卻是JavaSCript+CSS實(shí)現(xiàn)的哦。

<!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" mrc="text/html; charset=gb2312" />
<title>動(dòng)感伸縮、封閉的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)=='mrc'){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('-'))+'-mrc');
   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+'-mrc'));
      n=$(n+'-header');
      cc(n,'__');
      n.className=n.className+' '+n.tc;
     }else{
      cl($(n+'-mrc'));
      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" >模板無(wú)憂</div>
<div id="test-mrc">
    <div class="accordion_child">
 <ul><li><a href="/">網(wǎng)頁(yè)殊效</a></li>
 <li><a >最新源碼</a></li>
</ul>   
</div>    
  </div> 
  
  <div id="test1-header" class="accordion_headings" >網(wǎng)頁(yè)殊效</div>
  <div id="test1-mrc">
    <div class="accordion_child">
<ul><li><a href="http://www.hl5o.cn">CSS布局</a></li>
<li><a >菜單導(dǎo)航</a></li>
<li><a href="/">滑動(dòng)門(mén)</a></li>
</ul>
</div></div>
          <div id="test7-header" class="accordion_headings" >ASP源代碼</div>
<div id="test7-mrc">
    <div class="accordion_child">
<ul>
  <li><a href="http:">論壇社區(qū)</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-mrc">
    <div class="accordion_child">
<ul>
  <li><a href="http://www.hl5o.cn">常見(jiàn)題目</a></li>
  <li><a href="/">在線留言</a></li>
<li><a >聯(lián)系我們</a></li>
</ul>
</div></div>
</div>
</div>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2012-10-30

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索動(dòng)感伸縮、關(guān)閉的JS+CSS菜單
特效說(shuō)明：
菜單導(dǎo)航模板-動(dòng)感伸縮、關(guān)閉的JS+CSS菜單。