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

更新时间：2010年07月14日 19:28:55 作者：

点击后慢慢弹出下拉菜单，sky整理收集。

<!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" /> <meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,jb51.net,sky,www.jb51.net,站长特效 网" /> <meta name="description" content="www.jb51.net,jb51.net，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在jb51.net" /> <title>点击后慢慢弹出下拉菜单，sky整理收集。</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> </head> <body onload="new Accordian('basic-accordian',5,'header_highlight');"> <a href="<#ZC_BLOG_HOST#>">jb51.net</a>,站长必备的高质量网页特效和广告代码。jb51.net，站长js特效。<hr>  <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="http://jb51.net">脚本之家</a></li> <li><a href="https://www.jb51.net/jiaoben/">网页特效</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="http://jb51.net/?Cat=11">广告代码</a></li> <li><a href="http://jb51.net/?Cat=2">网页特效</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="http://jb51.net/">留言本</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="http://jb51.net/">留言本</a></li> <li><a href="#">常见问题</a></li> <li><a href="#">在线留言</a></li> <li><a href="#">联系我们</a></li> </ul> </div></div> </div> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

下拉菜单

javascript 代码简单的管理菜单
2008-05-05
CSS JavaScript 实现菜单功能改进版
通过一个HTML页面简单的实现了菜单功能。但是实际开发当中，如果菜单栏有很多项，频繁的修改HTML，会很繁琐，也容易出错。
2008-12-12
可折叠展开的简单目录实现代码
简单的目录，展开菜单，鼠标点击即可展开，再次点击即可合拢，类似树形菜单的功能，在浏览网页时会见很多，不多做介绍了，需要的朋友可以参考下
2012-12-12
通用的二级菜单代码(css+javascript)
前几天做网站使用到二级菜单，想也没想就在网上当了几个，不过大多都不太满意，只有《CSS二级菜单》看上去似乎好一点，就使用了那个。
2009-07-07
CSS TreeMenu 二级树形菜单示例
二级树形菜单示例：CSS TreeMenu ，非常漂亮的树形菜单，用在网站右侧比较合适。
2010-11-11
基于jquery的淡入淡出选项卡效果代码
经典的Tab选项卡代码,淡入淡出,jquery插件版,希望大家能够喜欢,简洁未过多美化.
2010-06-06
javascript 定时自动切换的选项卡Tab
JavaScript配合CSS制作一个能自动切换的网页选项卡,每隔一段时间,它就自动切换选项卡列表和标题,时间自设.
2009-10-10
代码经过精简后的仿QQ折叠菜单代码
代码经过精简后的仿QQ折叠菜单，以前发过的，不过这个是经过几轮代码精简后的一个版本，而且在各浏览器下的表现也很不错，兼容性没出问题。
2010-09-09
Div+Js实现的带阴影菜单微软以前网站曾用过
Div+Js实现的阴影菜单，微软以前老版网站首页曾用过，用以索引出Windows产品家族的所有产品，本菜单仅实现了一个雏形，想实现像微软一样的效果，估计还需要做不少工作。放出来的目的是供学习CSS的朋友做参考。
2009-12-12
JavaScript CSS菜单功能改进版
在上一篇《JavaScript css 实现菜单功能》通过一个HTML页面简单的实现了菜单功能。但是实际开发当中，如果菜单栏有很多项，频繁的修改HTML，会很繁琐，也容易出错。
2008-12-12