图片
CSS
JS广告
便捷
下载
解答
截图
高清壁纸
后台模板
PS插件
网页特效
Css新闻
推荐代码
页面应用
技术文章
图片展示
广告条
广告代码
软件类
在线工具
常用信息
动画制作
图片处理
辅助小工具
转换软件
其他
软件问题
系统问题
网页问题
常识整理
互联网价值
网站
图标
APP
按钮
公告
2013网站频道新版上线,功能持续完善中……
02.17
更新
mac系统PS数位板没有压感解决方案
01.27
查看windows10系统是否激活
08.31
windows10激活失败,亲测最有效的解决方法
08.31
Mac OS 您需要安装旧 Java SE 6 运行环境才能打开
04.10
Adobe adobeau2017英文转换为中文[汉化方法]
04.01
Mac电脑系统翻墙方法
05.26
最全手机APP中的尺寸规范
05.12
中文WebFont解决方案Font-Spider
09.02
互联网
JS控件
按钮
黑色
灰色
白色
蓝色
绿色
黄色
橙色
>
代码
>
菜单
展开菜单特效[兼容IE6.7.8.FF]
上一篇
下一篇
0
作者: 来源: 日期:2008/6/26 11:02:02 人气:
标签:
//<![CDATA[varuserAgent=navigator.userAgent.toLowerCase();varis_opera=userAgent.indexOf('opera')!=-1&&opera.version();varis_saf=userAgent.indexOf('applewebkit')!=-1||navigator.vendor=='AppleComputer,I…
<!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>中国网站频道www.v404.cn</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"> <!-- 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; } /*特殊样式-------------------------*/ --> </style> <script type="text/javascript" src="js/menu.js"></script> </head> <body onload="new Accordian('basic-accordian',5,'header_highlight');"> <div class="main"> <div id="basic-accordian" ><!--菜单开始--> <div id="test-header" class="accordion_headings" >新闻资讯</div><!--1新闻资讯--> <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><!--2学院概况--> <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> <!--3课程设置--> <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><!--4国际文凭课程--> <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> <!--5作品赏析--> <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><!--6学校视频--> <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><!--7招生信息--> <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><!--8招生信息--> <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><!--8在线咨询--> <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><!--main结束--> </body> </html> ==================================================================== 代码2: ==================================================================== <!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.onmouseover = 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"> <!-- 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; } /*特殊样式-------------------------*/ #test-content,#test1-content,#test2-content,#test3-content,#test4-content,#test5-content,#test6-content,#test7-content,#test8-content{ display: none; } --> </style> <script type="text/javascript" src="js/menu.js"></script> </head> <body onload="new Accordian('basic-accordian',5,'header_highlight');"> <div class="main"> <div id="basic-accordian" ><!--菜单开始--> <div id="test-header" class="accordion_headings" >新闻资讯</div><!--1新闻资讯--> <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><!--2学院概况--> <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> <!--3课程设置--> <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><!--4国际文凭课程--> <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> <!--5作品赏析--> <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><!--6学校视频--> <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><!--7招生信息--> <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><!--8招生信息--> <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><!--8在线咨询--> <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><!--main结束--> </body> </html>
代码由中国网站频道搜集整理
加关注
关于我们
帮助中心
意见反馈
设计导航
Copyright 2008
网站频道
All Rights Resverved.
提供:网页特效 JS广告 网站截图 酷站推荐 交流群:3506863
页面执行时间0.0938秒 查询数据库3次