📄 ch15-222.txt

📁 javascript demo thanks please
💻 TXT
字号:
<HTML>
<HEAD>
<TITLE>页面导航篇--下拉式菜单导航</TITLE>
</HEAD>

<BODY bgcolor="#fef4d2" >

<br><br>
<center>
<font color="ffaafa"><h2>页面导航篇--下拉式菜单导航</h2></font>
<hr width=300>
<br><br>

<!-- 案例代码1开始 -->

<script language=JavaScript>

var index=true
var MenuArray=new Array()
<!-- [Step1]: 这里可以按序增加下拉菜单中的名称和网址 -->
MenuArray[0]='<a href="http://www.263.net.cn">263 在线</a><br>'
MenuArray[1]='<a href="http://www.sohu.com">搜 狐 网</a><br>'
MenuArray[2]='<a href="http://www.sina.com.cn">新 浪 网</a><br>'
MenuArray[3]='<a href="http://cn.yahoo.com">雅 虎 网</a><br>'

function OpenMenu(){
  if (document.all){
    dropmenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX
    dropmenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+20
  if (dropmenu.style.visibility=="hidden"){
    if (index)   dropmenu.filters.revealTrans.apply()
       dropmenu.style.visibility="visible"
    if (index)   dropmenu.filters.revealTrans.play() }
    else{ hidemenu() }  }
}

function hidemenu(){
   if (index)  dropmenu.filters.revealTrans.stop()
   dropmenu.style.visibility="hidden"
}

if (document.all)  document.body.onclick=hidemenu
</script>
<!-- [Step2]: 在此能够设置子菜单的背景色 -->
<div id="dropmenu" style="position:absolute; background-color:#FFFFCC; width:100; visibility:hidden; border:1px solid black;padding:0px">
   <script language=JavaScript>
      if (document.all) dropmenu.style.padding='6px'
      for (i=0;i<MenuArray.length;i++) document.write(MenuArray[i])
   </script>
</div>
<script language=JavaScript>
   if (document.layers){ document.dropmenu.captureEvents(Event.CLICK)  }

</script>

<!-- 案例代码1结束 -->


<!-- 案例代码2开始 -->

<!-- [Step3]: 在此能够修改父菜单的位置 -->
<!-- [Step4]: 这里可以设置子菜单百叶窗的速度，数值大速度慢 -->
<style>
   #iewrap2{position:absolute;top=140;left=200}
   #dropmenu{filter:revealTrans(Duration=2,Transition=10)visibility:hide}
</style>
<span id="iewrap2" onClick="OpenMenu();event.cancelBubble=true;return false">
<!-- [Step5]: 在此能够更改父菜单的名称 -->
   <font face="宋体"><a href="#">下拉式菜单</a></font>
</span>

<!-- 案例代码2结束 -->


</BODY>

</HTML>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -