隐藏菜单(三)

鼠标点击后显示菜单

国内知名网站

社区论坛

脚本说明:
把如下代码加入<body>区域中
<style>
<!--
.iewrap1{
position:relative;
height:30px
}

.iewrap2{
position:absolute
}

#dropmenu0, #dropmenu1{
visibility:hide;
z-index:100;
}
-->
</style>
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr>
        <td width="17%">
<script language="JavaScript1.2">

var selection0=new Array()
selection0[0]='<font face="Verdana"><small><a href="http://www.163.com">网易</a><br>'
selection0[1]='<a href="http://www.sina.com.cn">新浪</a><br>'
selection0[2]='<a href="http://www.sohu.com">搜狐</a><br>'
selection0[3]='<a href="http://www.7stk.com/">东方网景</a><br>'
selection0[4]='<a href="http://www.21cn.com">世纪网络</a><br>'
selection0[5]='<a href="http://www.yesky.com/">天 极 网</a><br></small></font>'

var selection1=new Array()
selection1[0]='<font face="Verdana"><small><a href="http://www.hao123.com/man/club/club163.htm">网易社区</a><br>'
selection1[1]='<a href="http://www.hao123.com/man/club/sinabbs.htm">新浪论坛</a><br>'
selection1[2]='<a href="http://www.hao123.com/man/club/263bbs.htm">263论坛</a><br>'
selection1[3]='<a href="http://www.hao123.com/man/club/xilubbs.htm">西陆社区</a><br>'
selection1[4]='<a href="http://www.hao123.com/man/club/sohubbs.htm">搜狐社区</a><br></small></font>'

</script>
<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 height=35px>
<layer visibility=show>
<span class="iewrap1">
<span class="iewrap2" onClick="dropit2(dropmenu0);event.cancelBubble=true;return false">
<font face="Verdana"><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event,'document.dropmenu0')">国内知名网站</a></b></font>
</span>
</span>
</layer>
</ilayer></td> <td width="76%">
<ilayer height=35px>
<layer visibility=show>
<span class="iewrap1">
<span class="iewrap2" onClick="dropit2(dropmenu1);event.cancelBubble=true;return false">
<font face="Verdana"><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event,'document.dropmenu1')">社区论坛</a></b></font>
</span>
</span>
</layer>
</ilayer></td>
      </tr>
    </table>
   <script>

</script>    
<div id="dropmenu0" style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:155;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding='4px'
for (i=0;i<selection0.length;i++)
document.write(selection0[i])
</script>
</div>