首页 > 代码库 > 企业站常用的点击后弹出下拉菜单导航
企业站常用的点击后弹出下拉菜单导航
<!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,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<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">
<!--
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="http://www.mamicode.com/js/menu.js"></script>
</head>
<body onl oad="new Accordian(‘basic-accordian‘,5,‘header_highlight‘);">
<a href="http://www.mamicode.com/<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站-->
<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="http://zzjs.net/?Cat=1">站长特效</a></li>
<li><a href="http://zzjs.net/?Cat=2">网页特效</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="http://zzjs.net/?Cat=11">广告代码</a></li>
<li><a href="http://zzjs.net/?Cat=2">网页特效</a></li>
<li><a href="http://www.mamicode.com/#">教学设施</a></li>
<li><a href="http://www.mamicode.com/#">刘晓阳校长介绍</a></li>
<li><a href="http://www.mamicode.com/#">优良师资</a></li>
<li><a href="http://www.mamicode.com/#">资质认证与荣誉</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="http://www.mamicode.com/#">形象设计 (大学专科)</a></li>
<li><a href="http://www.mamicode.com/#">化妆造型</a></li>
<li><a href="http://www.mamicode.com/#">美容</a></li>
<li><a href="http://www.mamicode.com/#">美发</a></li>
<li><a href="http://www.mamicode.com/#">美甲</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="http://www.mamicode.com/#">cidesco圣迪斯哥</a></li>
<li><a href="http://www.mamicode.com/#">city & gulids国际美容师</a></li>
<li><a href="http://www.mamicode.com/#">cibtac国际美容师</a></li>
<li><a href="http://www.mamicode.com/#">srh国际发型师</a></li>
<li><a href="http://www.mamicode.com/#">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="http://www.mamicode.com/#">形象设计</a></li>
<li><a href="http://www.mamicode.com/#">化妆造型</a></li>
<li><a href="http://www.mamicode.com/#">美容</a></li>
<li><a href="http://www.mamicode.com/#">美发</a></li>
<li><a href="http://www.mamicode.com/#">美甲</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="http://www.mamicode.com/#">学院介绍视频</a></li>
<li><a href="http://www.mamicode.com/#">活动视频</a></li>
<li><a href="http://www.mamicode.com/#">考试现场视频</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="http://zzjs.net/">留言本</a></li>
<li><a href="http://www.mamicode.com/#">形象设计大学专科毕业生</a></li>
<li><a href="http://www.mamicode.com/#">cidesco美容博士人才</a></li>
<li><a href="http://www.mamicode.com/#">作育英才时代见证(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="http://www.mamicode.com/#">2008年招生简章</a></li>
<li><a href="http://www.mamicode.com/#">报名方式</a></li>
<li><a href="http://www.mamicode.com/#">报名须知</a></li>
<li><a href="http://www.mamicode.com/#">在线报名</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="http://zzjs.net/">留言本</a></li>
<li><a href="http://www.mamicode.com/#">常见问题</a></li>
<li><a href="http://www.mamicode.com/#">在线留言</a></li>
<li><a href="http://www.mamicode.com/#">联系我们</a></li>
</ul>
</div></div>
</div><!--菜单结束-->
</div><!--main结束-->
</body>
</html>