一个较酷的层叠式下拉菜单

『更新时间：2002-9-14 』『字体：变小变大』『作者：未知 | 来源：网络』

把如下代码加入<body>区域中:
要完成此效果把如下代码加入到区域中
<SCRIPT language=JavaScript1.2>
//菜单1的内容
var menu1=new Array()
menu1[0]='<a href=http://www.kingsnet.biz>首页</a><br>'
menu1[1]='<a href=link1.htm>链接</a><br>'
menu1[2]='<a href=link.htm>链接</a><br>'
//菜单2的内容
var menu2=new Array()
menu2[0]='<a href=link.htm>友情链接</a><br>'
menu2[1]='<a href=link.htm>语音聊天</a><br>'
menu2[2]='<a href=http://www.kingsnet.biz>随意链接</a><br>'
</SCRIPT>
<STYLE>

</STYLE>
<SCRIPT language=JavaScript1.2>
//以下不要改
var zindex=100
function dropit2(whichone){
if (window.themenu&&themenu.id!=whichone.id)
themenu.style.visibility="hidden"
themenu=whichone
if (document.all){
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (themenu.style.visibility=="hidden"){
themenu.style.visibility="visible"
themenu.style.zIndex=zindex++
}
else{
hidemenu()
}
}
}
function dropit(e,whichone){
if (window.themenu&&themenu.id!=eval(whichone).id)
themenu.visibility="hide"
themenu=eval(whichone)
if (themenu.visibility=="hide")
themenu.visibility="show"
else
themenu.visibility="hide"
themenu.zIndex++
themenu.left=e.pageX-e.layerX
themenu.top=e.pageY-e.layerY+19
return false
}
function hidemenu(whichone){
if (window.themenu)
themenu.style.visibility="hidden"
}
function hidemenu2(){
themenu.visibility="hide"
}
if (document.all)
document.body.onclick=hidemenu
//以上不要改
</SCRIPT>
<ILAYER left="65" top="9" height="35px"><LAYER left="381" top="26" visibility="show">
<div align=center><SPAN class=iewrap1><SPAN class=iewrap2 onclick="dropit2(dropmenu0);event.cancelBubble=true;return false"><FONT face=宋体><A onclick="if(document.layers) return dropit(event, 'document.dropmenu0')" href="#">菜单一</A></FONT> </SPAN></SPAN></div></LAYER>
<div align=center></div></ILAYER><BR>

<ILAYER left="473" top="-26" height="35px"><LAYER left="-234" top="-2" visibility="show">
<div align=center><SPAN class=iewrap1><SPAN class=iewrap2 onclick="dropit2(dropmenu1);event.cancelBubble=true;return false"><FONT face=宋体><A onclick="if(document.layers) return dropit(event, 'document.dropmenu1')" href="#">菜单二</A></FONT> </SPAN></SPAN></div></LAYER></ILAYER><BR>

<div id=dropmenu0 style="BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: black 1px solid; PADDING-LEFT: 0px; LEFT: 0px; VISIBILITY: hidden; PADDING-BOTTOM: 0px; BORDER-LEFT: black 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: black 1px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #cdecf5; layer-background-color: #CDECF5; wid: 80">
<SCRIPT language=JavaScript1.2>
if (document.all)
dropmenu0.style.padding="4px"
for (i=0;i<menu1.length;i++)
document.write(menu1[i])
</SCRIPT>
</div>
<SCRIPT language=JavaScript1.2>
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu2
}
</SCRIPT>
<div id=dropmenu1 style="BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: black 1px solid; PADDING-LEFT: 0px; LEFT: 0px; VISIBILITY: hidden; PADDING-BOTTOM: 0px; BORDER-LEFT: black 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: black 1px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #cdecf5; layer-background-color: #CDECF5; wid: 80">
<SCRIPT language=JavaScript1.2>
if (document.all)
dropmenu1.style.padding="4px"
for (i=0;i<menu2.length;i++)
document.write(menu2[i])
</SCRIPT>
</div>
<SCRIPT language=JavaScript1.2>
if (document.layers){
document.dropmenu1.captureEvents(Event.CLICK)
document.dropmenu1.onclick=hidemenu2
}
</SCRIPT>

【点击数：】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

一个较酷的层叠式下拉菜单

相关文章

网友评论