点击后慢慢弹出下拉菜单效果代码(栏目管理常用)

</p> <p><title>点击后<a href="https://kunjuke.com/tag/108256/" title="慢慢" target="_blank">慢慢</a><a href="https://kunjuke.com/tag/2808/" title="弹出" target="_blank">弹出</a><a href="https://kunjuke.com/tag/147/" title="下拉" target="_blank">下拉</a><a href="https://kunjuke.com/tag/148/" title="菜单" target="_blank">菜单</a>，sky整理收集。</title> </p> <p>function $(d){<br /> return document.getelementbyid(d);<br /> }<br /> // set or get the current display style of the div<br /> function dsp(d,v){<br /> if(v==undefined){<br /> return d.style.display;<br /> }else{<br /> d.style.display=v;<br /> }<br /> }<br /> // set or get the height of a div.<br /> function sh(d,v){<br /> // if you are getting the height then display must be block to return the absolute height<br /> if(v==undefined){<br /> if(dsp(d)!='none'&& dsp(d)!=''){<br /> return d.offsetheight;<br /> }<br /> viz = d.style.visibility;<br /> d.style.visibility = 'hidden';<br /> o = dsp(d);<br /> dsp(d,'block');<br /> r = parseint(d.offsetheight);<br /> dsp(d,o);<br /> d.style.visibility = viz;<br /> return r;<br /> }else{<br /> d.style.height=v;<br /> }<br /> }<br /> /*<br /> * variable 's' defines the speed of the accordian<br /> * variable 't' defines the refresh rate of the accordian<br /> */<br /> s=7;<br /> t=10;<br /> //collapse timer is triggered as a setinterval to reduce the height of the div exponentially.<br /> function ct(d){<br /> d = $(d);<br /> if(sh(d)>0){<br /> v = math.round(sh(d)/d.s);<br /> v = (v<1) ? 1 :v ;<br /> v = (sh(d)-v);<br /> sh(d,v+'px');<br /> d.style.opacity = (v/d.maxh);<br /> d.style.filter= 'alpha(opacity='+(v*100/d.maxh)+');';<br /> }else{<br /> sh(d,0);<br /> dsp(d,'none');<br /> clearinterval(d.t);<br /> }<br /> }<br /> //expand timer is triggered as a setinterval to increase the height of the div exponentially.<br /> function et(d){<br /> d = $(d);<br /> if(sh(d)<d.maxh){<br /> v = math.round((d.maxh-sh(d))/d.s);<br /> v = (v<1) ? 1 :v ;<br /> v = (sh(d)+v);<br /> sh(d,v+'px');<br /> d.style.opacity = (v/d.maxh);<br /> d.style.filter= 'alpha(opacity='+(v*100/d.maxh)+');';<br /> }else{<br /> sh(d,d.maxh);<br /> clearinterval(d.t);<br /> }<br /> }<br /> // collapse initializer<br /> function cl(d){<br /> if(dsp(d)=='block'){<br /> clearinterval(d.t);<br /> d.t=setinterval('ct("'+d.id+'")',t);<br /> }<br /> }<br /> //expand initializer<br /> function ex(d){<br /> if(dsp(d)=='none'){<br /> dsp(d,'block');<br /> d.style.height='0px';<br /> clearinterval(d.t);<br /> d.t=setinterval('et("'+d.id+'")',t);<br /> }<br /> }<br /> // removes classname from the given div.<br /> function cc(n,v){<br /> s=n.classname.split(/\s+/);<br /> for(p=0;p<s.length;p++){<br /> if(s[p]==v+n.tc){<br /> s.splice(p,1);<br /> n.classname=s.join(' ');<br /> break;<br /> }<br /> }<br /> }<br /> //accordian initializer<br /> function accordian(d,s,tc){<br /> // get all the elements that have id as content<br /> l=$(d).getelementsbytagname('div');<br /> c=[];<br /> for(i=0;i<l.length;i++){<br /> h=l[i].id;<br /> if(h.substr(h.indexof('-')+1,h.length)=='content'){c.push(h);}<br /> }<br /> sel=null;<br /> //then search through headers<br /> for(i=0;i<l.length;i++){<br /> h=l[i].id;<br /> if(h.substr(h.indexof('-')+1,h.length)=='header'){<br /> d=$(h.substr(0,h.indexof('-'))+'-content');<br /> d.style.display='none';<br /> d.style.overflow='hidden';<br /> d.maxh =sh(d);<br /> d.s=(s==undefined)? 7 : s;<br /> h=$(h);<br /> h.tc=tc;<br /> h.c=c;<br /> // set the onclick function for each header.<br /> h.onclick = function(){<br /> for(i=0;i<this.c.length;i++){<br /> cn=this.c[i];<br /> n=cn.substr(0,cn.indexof('-'));<br /> if((n+'-header')==this.id){<br /> ex($(n+'-content'));<br /> n=$(n+'-header');<br /> cc(n,'__');<br /> n.classname=n.classname+' '+n.tc;<br /> }else{<br /> cl($(n+'-content'));<br /> cc($(n+'-header'),'');<br /> }<br /> }<br /> }<br /> if(h.classname.match(/selected+/)!=undefined){ sel=h;}<br /> }<br /> }<br /> if(sel!=undefined){sel.onclick();}<br /> } </p> <p><!-- 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{ width: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%; width: 96%; margin-right: auto; margin-left: auto; } /*特殊样式-*/ --> </p> <p>">jb51.net,站长必备的高质量网页特效和广告代码。jb51.net，站长js特效。</p> <hr> <p><!--欢迎来到jb51.net，我们网站收集大量高质量js特效，提供许多广告代码下载--> </p> <p><!--菜单开始--><br /> 网站首页<!--1新闻资讯--> </p> <ul> <li></li> <li></li> </ul> <p>学院概况<!--2学院概况--> </p> <ul> <li>广告代码</li> <li>网页特效</li> <li></li> <li></li> <li></li> <li></li> </ul> <p>专业设置 <!--3课程设置--> </p> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <p>国际文凭课程<!--4国际文凭课程--> </p> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <p>师生经典作品<br /> <!--5作品赏析--> </p> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <p>在线视频<!--6学校视频--> </p> <ul> <li></li> <li></li> <li></li> </ul> <p>蒙妮坦精英学员<!--7招生信息--> </p> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <p>招生信息<!--8招生信息--> </p> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <p>咨询留言<!--8在线咨询--> </p> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <p><!--菜单结束--><br /> <!--main结束--> </p> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]