📄 ch11-155.txt
字号:
<HTML>
<HEAD>
<TITLE>菜单导航篇--分层菜单</TITLE>
</HEAD>
<BODY bgcolor="#fef4d2" >
<br><br>
<center>
<font color="ffaafa"><h2>菜单导航篇--分层菜单</h2></font>
<hr width=300>
<br>
<!-- 案例代码1开始 -->
<script language=JavaScript>
<!-- [Step1]: 这里可以设置图形标志的名称 -->
var exImg=new Image(); exImg.src='picture001.jpg'
var unImg=new Image(); unImg.src='Picture002.jpg'
var stayFolded=false
function init(){
oTop=new Array()
oTop[0]=new makeMenu('divTop1','divCont')
oTop[1]=new makeMenu('divTop2','divCont')
oTop[2]=new makeMenu('divTop3','divCont')
oSub=new Array()
oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }
for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
function makeMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css = ((document.layers) ? 1:0) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style') ;
this.ref=((document.layers) ? 1:0) ? eval(nest+'document.'+obj+'.document'):eval('document');
this.height=(document.layers) ? 1:0?this.ref.height:eval(obj+'.offsetHeight')
this.x=((document.layers) ? 1:0)? this.css.left:this.css.pixelLeft;
this.y=((document.layers) ? 1:0)? this.css.top:this.css.pixelTop;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt
return this
}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function menu(num){
if(!stayFolded){
for(i=0;i<oSub.length;i++){
if(i!=num){
oSub[i].hideIt()
oTop[i].ref["imgA"+i].src=unImg.src
}
}
for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
if(oSub[num].vis()){
oSub[num].showIt()
oTop[num].ref["imgA"+num].src=exImg.src }
else{
oSub[num].hideIt()
oTop[num].ref["imgA"+num].src=unImg.src }
for(i=1;i<oTop.length;i++){
if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height)
else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
onload=init;
</script>
<!-- 案例代码1结束 -->
<!-- 案例代码2开始 -->
<style>
DIV.clTop{position:absolute; width:100}
DIV.clSub{position:absolute; left:7; width:140}
#divCont{position:relative; left:8; top:0; height:100; width:0;}
A.clMain{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; font-weight:bold; color:black}
A.clSubb{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; color:black}
#divMain{position:absolute}
</style>
<div id="divCont">
<!-- [Step2]: 在此能够按序增加菜单的数目 -->
<!-- [Step3]: 这里可以更改图形标志的宽高 -->
<!-- [Step4]: 在此能够设置图形标志的边界框 -->
<!-- [Step5]: 这里可以更改菜单的名称 -->
<div id="divTop1" class="clTop"><a href="#" onclick="menu(0); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ><img src="Picture001.jpg" name="imgA0" width=12 height=12 border="1"> 分层菜单一</a><br>
<!-- [Step6]: 在此能够按序增加子菜单的数目 -->
<div id="divSub1" class="clSub">
<a href="#" class="clSubb" >-子菜单1</a><br>
<a href="#" class="clSubb" >-子菜单2</a><br>
</div>
</div>
<div id="divTop2" class="clTop"><a href="#" onclick="menu(1); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ><img src="Picture001.jpg" name="imgA1" width=12 height=12 border="1"> 分层菜单二</a><br>
<div id="divSub2" class="clSub">
<a href="#" class="clSubb" >-子菜单1</a><br>
<a href="#" class="clSubb" >-子菜单2</a><br>
<a href="#" class="clSubb" >-子菜单3</a><br>
</div>
</div>
<div id="divTop3" class="clTop"><a href="#" onclick="menu(2); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()"><img src="Picture001.jpg" name="imgA2" width=12 height=12 border="1"> 分层菜单三</a><br>
<div id="divSub3" class="clSub">
<a href="#" class="clSubb" >-子菜单1</a><br>
<a href="#" class="clSubb" >-子菜单2</a><br>
</div>
</div>
</div>
<!-- 案例代码2结束 -->
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -