下面的是显示4个一级菜单的,还是上面的问题。3个菜单的已经可以正常显示了。
<HTML>
<HEAD>
<TITLE>菜单导航篇--分层菜单</TITLE>
</HEAD><BODY bgcolor="#fef4d2" ><br><br>
<center>
<h2>菜单导航篇--分层菜单</h2>
<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=falsefunction init(){
oTop=new Array()
oTop[0]=new makeMenu('divTop1','divCont')
oTop[1]=new makeMenu('divTop2','divCont')
oTop[2]=new makeMenu('divTop3','divCont')
oTop[3]=new makeMenu('divTop4','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')
oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')
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 id="divTop4" class="clTop"><a href="#" onclick="menu(3); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ><img src="Picture001.jpg" name="imgA0" width=12 height=12 border="1"> 分层菜单4</a><br>
<!-- [Step6]: 在此能够按序增加子菜单的数目 -->
<div id="divSub4" class="clSub">
<a href="#" class="clSubb" >-子菜单1</a><br>
<a href="#" class="clSubb" >-子菜单2</a><br>
</div>
</div>
</div><!-- 案例代码2结束 -->
</BODY></HTML>
<HTML>
<HEAD>
<TITLE>菜单导航篇--分层菜单</TITLE>
</HEAD><BODY bgcolor="#fef4d2" ><br><br>
<center>
<h2>菜单导航篇--分层菜单</h2>
<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=falsefunction init(){
oTop=new Array()
oTop[0]=new makeMenu('divTop1','divCont')
oTop[1]=new makeMenu('divTop2','divCont')
oTop[2]=new makeMenu('divTop3','divCont')
oTop[3]=new makeMenu('divTop4','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')
oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')
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 id="divTop4" class="clTop"><a href="#" onclick="menu(3); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ><img src="Picture001.jpg" name="imgA0" width=12 height=12 border="1"> 分层菜单4</a><br>
<!-- [Step6]: 在此能够按序增加子菜单的数目 -->
<div id="divSub4" class="clSub">
<a href="#" class="clSubb" >-子菜单1</a><br>
<a href="#" class="clSubb" >-子菜单2</a><br>
</div>
</div>
</div><!-- 案例代码2结束 -->
</BODY></HTML>
=======>
<img src="Picture001.jpg" name="imgA3" width=12 height=12 border="1"> 分层菜单4name名称没有改过来