|
说明: 一个较酷的层叠式下拉菜单
效果: 运行后查看！
代码: 要完成此效果把如下代码加入到<body>区域中:
<script language="JavaScript1.2">
//菜单1的内容
var menu1=new Array()
menu1[0]='<a href=http://www.ntc.com.cn>首页</a><br>'
menu1[1]='<a href=link.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=http://www.ntc.com.cn/contact-us.asp>联系我们</a><br>'
menu2[2]='<a href=http://www.ntc.com.cn>随意链接</a><br>'
</script>
<style>
<!--
.iewrap1{
position:relative;
height:30px;
; font-family: "宋体"; font-size: 9pt}
.iewrap2{
position:absolute;
; font-family: "宋体"; font-size: 9pt}
#dropmenu0, #dropmenu1{
visibility:hide;
z-index:100;
}
#dropmenu0 { font-family: "宋体" ; font-size:
9pt}#dropmenu1 { font-family: "宋体" ; font-size:
9pt}-->
</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>
<!----------菜单1开始---------->
<ilayer height=35px left="65" top="9">
<layer visibility=show left="381" top="26">
<div align="center"><span class=iewrap1>
<span class=iewrap2
onClick="dropit2(dropmenu0);event.cancelBubble=true;return
false"><font face=宋体><a href="#"
onClick="if(document.layers) return dropit(event,
'document.dropmenu0')">菜单一</a></font>
</span> </span> </div>
</layer>
<div align="center"></div>
</ilayer><br>
<!----------菜单1结束---------->
| 
