235、抽屉式菜单

235、抽屉式菜单

1   把如下代码复制到<head></head>之间

 

 

<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>

 

 

2     把如下代码复制到<body></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://www.7stk.com/background/index.htm" target="_blank">背景按钮特效</a><br>

                <a href="http://www.7stk.com/navigation/index.htm" target="_blank">导航菜单特效</a><br>

                <a href="http://www.7stk.com/img/index.htm" target="_blank">网页图片特效</a><br>

                <a href="http://www.7stk.com/text/index.htm" target="_blank">网页文本特效</a><br>

                <a href="http://www.7stk.com/time/index.htm" target="_blank">时间日期特效</a><br>

                <a href="http://www.7stk.com/state/index.htm" target="_blank">状态栏特效</a><br>

                <a href="http://www.7stk.com/other/index.htm" 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://www.7stk.com/background/index.htm" target="_blank">背景按钮特效</a><br>

                <a href="http://www.7stk.com/navigation/index.htm" target="_blank">导航菜单特效</a><br>

                <a href="http://www.7stk.com/img/index.htm" target="_blank">网页图片特效</a><br>

                <a href="http://www.7stk.com/text/index.htm" target="_blank">网页文本特效</a><br>

                <a href="http://www.7stk.com/time/index.htm" target="_blank">时间日期特效</a><br>

                <a href="http://www.7stk.com/state/index.htm" target="_blank">状态栏特效</a><br>

                <a href="http://www.7stk.com/other/index.htm" target="_blank">另类网页特效</a></center>

        </div>

        <div id="divTopMenuBottom1" class="clTopMenuBottom"></div>

        </div>

 

<!--第二个菜单定义结束 -->

 

Write a comment

Comments: 0