|
|
| 抽屉式菜单 |
| 整理：Cnwshow.Com 来源：Internet 整理时间：2008-5-30 |
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>抽屉式菜单</title>
<style>
A{color:blue; text-decoration:none}
A:hover{color:red;text-decoration:underline;}
A:link{text-decoration:none;}
TD{font-family:宋体,helvetica; font-size:9pt}
DIV.clTopMenu{position:absolute; width:97; height:150; clip:rect(0,101,14,0); visibility:hidden; z-index:31; }
DIV.clTopMenuBottom{position:absolute; width:97; height:3; clip:rect(0,101,3,0); top:11; layer-background-color:#c0c000; background-color:#c0c000; z-index:2}
DIV.clTopMenuText{position:absolute; width:88; left:5; top:15; font-family:宋体,helvetica; font-size:9pt; z-index:1;layer-background-color:#C8C8FF; background-color:#C8C8FF}
</style>
<script>
ie=document.all?1:0
n=document.layers?1:0
/***设置变量***/
var numberOfMenus=1 //这个变量是定义有几个抽屉式菜单。0代表有一个，1代表有两个（需要在<body></body>中定义不同的菜单定义）
var mwidth=97 //菜单文字的宽度
var pxBetween=10 //两个或多个菜单的间隔（单位：像素）
var fromLeft=20 //第一个菜单的左边边距（单位：像素）
var fromTop=10 //菜单的上边距（单位：像素）
var bgColor='#c0c000' //当鼠标没有移入菜单头时，菜单底的颜色
var bgColorChangeTo='#c0c000'//当鼠标移入菜单头时，菜单底的颜色
var imageHeight=13 //菜单头的高度（单位：像素）
/***下面的程序如果你不是高手，请不要更改***/
//构造对象
function makeNewsMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
this.scrollHeight=n?this.css.document.height:eval('document.all.'+obj+'.offsetHeight')
this.moveIt=b_moveIt;this.bgChange=b_bgChange;
this.slideUp=b_slideUp; this.slideDown=b_slideDown;
this.clipTo=b_clipTo;
this.obj = obj + "Object"; eval(this.obj + "=this")
}
//对像的方法
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function b_bgChange(color){if(ie) this.css.backgroundColor=color; else this.css.bgColor=color}
function b_clipTo(t,r,b,l){
if(n){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
}else this.css.clip="rect("+t+","+r+","+b+","+l+")";
}
function b_slideUp(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y>ystop){
this.moveIt(this.x,this.y-5); eval(wh)
setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
function b_slideDown(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y<ystop){
this.moveIt(this.x,this.y+5); eval(wh)
setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
//初始化，并建立一个跨浏览器的页
function newsMenuInit(){
oTopMenu=new Array()
for(i=0;i<=numberOfMenus;i++){
oTopMenu[i]=new Array()
oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)
oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
oTopMenu[i][1].moveIt(0,imageHeight)
oTopMenu[i][0].clipTo(0,mwidth,imageHeight+3,0)
oTopMenu[i][0].moveIt(i*mwidth+fromLeft+(i*pxBetween),fromTop)
oTopMenu[i][0].css.visibility="visible"
}
}
//当点击后，移到菜单，就像抽屉一样打开菜单
function topMenu(num){
if(oTopMenu[num][1].y==imageHeight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)')
else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(imageHeight,10,40,'oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)')
}
//当鼠标进入时，
function menuOver(num){oTopMenu[num][1].bgChange(bgColorChangeTo)}
function menuOut(num){oTopMenu[num][1].bgChange(bgColor)}
//在页面载入的时候初始化菜单
onload=newsMenuInit;
</script>
</head>
<body>
<!-- 第一个菜单定义 -->
<div id="divTopMenu0" class="clTopMenu"><a href="#" onmouseover="menuOver(0)" onmouseout="menuOut(0)" onclick="topMenu(0); if(ie)this.blur(); return false">菜单一</a>
<div id="divTopMenuText0" class="clTopMenuText"><center>
<a href="http://" target="_blank">你的链接</a><br>
<a href="http://" target="_blank">你的链接</a><br>
<a href="http://" target="_blank">你的链接</a><br>
<a href="http://" target="_blank">你的链接</a><br>
<a href="http://" target="_blank">你的链接</a><br>
<a href="http://" target="_blank">你的链接</a><br>
<a href="http://" target="_blank">你的链接</a></center>
</div>
<div id="divTopMenuBottom0" class="clTopMenuBottom"></div>
</div>
<!--第一个菜单定义结束 -->
<!-- 第二个菜单定义 -->
<div id="divTopMenu1" class="clTopMenu"><a href="#" onmouseover="menuOver(1)" onmouseout="menuOut(1)" onclick="topMenu(1); if(ie)this.blur(); return false">菜单二</a>
<div id="divTopMenuText1" class="clTopMenuText"><center>
<a href="http://" target="_blank">你的链接</a><br>
<a href="http://" target="_blank">你的链接</a><br>
<a href="http://" target="_blank">你的链接</a><br>
<a href="http://" target="_blank">你的链接</a><br>
<a href="http://" target="_blank">你的链接</a><br>
<a href="http://" target="_blank">你的链接</a><br>
<a href="http://" target="_blank">你的链接</a></center>
</div>
<div id="divTopMenuBottom1" class="clTopMenuBottom"></div>
</div>
<!--第二个菜单定义结束 -->
</body>
</html>
|
|
|
|
|
|
