不错的左纵向二级菜单(JS)

最新推荐文章于 2021-06-02 14:32:10 发布

躲不过这哀伤

最新推荐文章于 2021-06-02 14:32:10 发布

阅读量171

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/hanwater/archive/2009/09/22/1571515.html

版权

<!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>下拉效果</title>
<script type=text/javascript>
function $(d){
return document.getElementById(d);
}
// set or get the current display style of the div
function dsp(d,v){
if(v==undefined){
  return d.style.display;
}else{
  d.style.display=v;
}
}
// set or get the height of a div.
function sh(d,v){
// if you are getting the height then display must be block to return the absolute height
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;
}
}
/*
* Variable 'S' defines the speed of the accordian
* Variable 'T' defines the refresh rate of the accordian
*/
s=7;
t=10;
//Collapse Timer is triggered as a setInterval to reduce the height of the div exponentially.
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);
}
}
//Expand Timer is triggered as a setInterval to increase the height of the div exponentially.
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);
}
}
// Collapse Initializer
function cl(d){
if(dsp(d)=='block'){
  clearInterval(d.t);
  d.t=setInterval('ct("'+d.id+'")',t);
}
}
//Expand Initializer
function ex(d){
if(dsp(d)=='none'){
  dsp(d,'block');
  d.style.height='0px';
  clearInterval(d.t);
  d.t=setInterval('et("'+d.id+'")',t);
}
}
// Removes Classname from the given div.
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;
  }
}
}
//Accordian Initializer
function Accordian(d,s,tc){
// get all the elements that have id as content
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;
//then search through headers
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;
   // set the onclick function for each header.
   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>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body οnlοad="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="#">新闻资讯</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="#">学院简介</a></li>
<li><a href="#">蒙妮坦文化历史</a></li>
<li><a href="#">教学设施</a></li>
<li><a href="#">刘晓阳校长介绍</a></li>
<li><a href="#">优良师资</a></li>
<li><a href="#">资质认证与荣誉</a></li>
</ul>
</div></div>
<div id="test2-header" class="accordion_headings" >专业设置</div> 
<div id="test2-content">
    <div class="accordion_child">
<ul>
<li><a href="#">形象设计 (大学专科)</a></li>
<li><a href="#">化妆造型</a></li>
<li><a href="#">美容</a></li>
<li><a href="#">美发</a></li>
<li><a href="#">美甲</a></li>
</ul></div></div>
<div id="test3-header" class="accordion_headings" >国际文凭课程</div>
<div id="test3-content">
    <div class="accordion_child">
<ul><li><a href="#">cidesco圣迪斯哥</a></li>
<li><a href="#">city & gulids国际美容师</a></li>
<li><a href="#">cibtac国际美容师</a></li>
<li><a href="#">srh国际发型师</a></li>
<li><a href="#">itec国际专业时装、舞台、媒体化妆师</a></li>
</ul></div></div>

          <div id="test4-header" class="accordion_headings" >师生经典作品</div>
          
<div id="test4-content">
    <div class="accordion_child">
<ul>
<li><a href="#">形象设计</a></li>
<li><a href="#">化妆造型</a></li>
<li><a href="#">美容</a></li>
<li><a href="#">美发</a></li>
<li><a href="#">美甲</a></li>
</ul>
</div></div>
          <div id="test5-header" class="accordion_headings" >在线视频</div>
<div id="test5-content">
    <div class="accordion_child">
<ul>
<li><a href="#">学院介绍视频</a></li>
<li><a href="#">活动视频</a></li>
<li><a href="#">考试现场视频</a></li>
</ul>
</div></div>
    <div id="test6-header" class="accordion_headings" >蒙妮坦精英学员</div>
<div id="test6-content">
    <div class="accordion_child">
<ul>
    <li><a href="#">各专业优秀学员</a></li>
    <li><a href="#">形象设计大学专科毕业生</a></li>
<li><a href="#">cidesco美容博士人才</a></li>
<li><a href="#">作育英才时代见证(1981-2000年)</a></li>
</ul>
</div></div>
          <div id="test7-header" class="accordion_headings" >招生信息</div>
<div id="test7-content">
    <div class="accordion_child">
<ul>
<li><a href="#">2008年招生简章</a></li>
<li><a href="#">报名方式</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="#">常见问题</a></li>
<li><a href="#">在线留言</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div></div>

</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/hanwater/archive/2009/09/22/1571515.html