用DHTML來(lái)模擬完成下拉菜單

我在許多的網(wǎng)站上看到上面都有下拉菜單的,使得網(wǎng)站更栩栩如生了!象微軟的主頁(yè),后來(lái)我想假如單用div和JAvascript是否也能實(shí)現(xiàn)了,通過(guò)幾次實(shí)驗(yàn)也總于成功了,現(xiàn)在把自己想法告訴大家,希望大家網(wǎng)頁(yè)也加上下拉菜單使網(wǎng)爺更生動(dòng).
  以前DOS下編寫應(yīng)用程序都要面臨著界面編寫的,象菜單這些東西也要自己從頭到尾都要自己編的,到了win時(shí)代,通過(guò)事件驅(qū)動(dòng)我們就很容易編寫了,何況菜單集成到系統(tǒng)里了,在IE下編寫菜單也是基于通過(guò)捕獲鼠標(biāo)事件來(lái)響應(yīng)菜單下拉和隱藏的,
  我們首先要用表格來(lái)顯示菜單條,
<table>
<tr>
   <td height="9" width="100" align=center bgcolor="#33FFFF" onmouseover="showmenu(menuwenxue)">menu1</td>
   <td height="9" width="100" align=center bgcolor="#33FFFF" onmouseover="showmenu(menuxuexi)">menu1</td>
<tr>
<table>
<div id="menuwenxue" style="position:absolute; width:90px; height:115px; z-index:1; left: 245px; top: 75px; visibility: hidden" onmouseout="hidemenu(menuwenxue)">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" onmouseout="hidemenu(menuwenxue)">
  <tr>
   <td height="10" class="menufont" onmouseover="showmenu(menuwenxue)">&nbsp;</td>
  </tr>
  <tr>
   <td height="28" align=center class="menufont" bgcolor=#ff00ff onmouseover="showmenu(menuwenxue)"><a href="javascript:alert('menu1_item1')">menu1_item1</a></td>
  </tr>
  <tr>
   <td height="31" align=center bgcolor=#ff00ff onmouseover="showmenu(menuwenxue)"><a href="javascript:alert('menu1_item2')">menu1_item2</a></td>
  </tr>
  <tr>
   <td height="30" align=center bgcolor=#ff00ff onmouseover="showmenu(menuwenxue)"><a href="javascript:alert('menu1_item3')">menu1_item3</a></td>
  </tr>
</table>
</div>

<div id="menuxuexi" style="position:absolute; width:90px; height:115px; z-index:1; left: 340px; top: 75px; visibility: hidden" onmouseout="hidemenu(menuxuexi)">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" onmouseout="hidemenu(menuxuexi)">
  <tr>
   <td height="10" onmouseover="showmenu(menuxuexi)">&nbsp;</td>
  </tr>
  <tr>
   <td height="27" align=center bgcolor=#ff00ff onmouseover="showmenu(menuxuexi)"><a href="javascript:alert('menu2_item2')">menu2_item1</a></td>
  </tr>
  <tr>
   <td height="31" align=center bgcolor=#ff00ff onmouseover="showmenu(menuxuexi)"><a href="javascript:alert('menu2_item2')">menu2_item2</a></td>
  </tr>
  <tr>
   <td height="30" align=center bgcolor=#ff00ff onmouseover="showmenu(menuxuexi)"><a href="javascript:alert('menu2_item3')">menu2_item3</a></td>
  </tr>
</table>
</div>
<Script language="JavaScript">
<!--
function showmenu(menu){
if(menushow)
  menushow.style.visibility="hidden"  
menushow=menu
menu.style.visibility="visible"
}
function hidemenu(menu){
menu.style.visibility="hidden"
}
function hideshow()
{
if(menushow)
  menushow.style.visibility="hidden"
}
-->
</script>

-->
</script>
上面是我從調(diào)試代碼上截下來(lái)的,要想得到好看的結(jié)果需要改變一下位子關(guān)系的,當(dāng)然還要注意一下鼠標(biāo)移動(dòng)時(shí)候是否菜單會(huì)出現(xiàn)異常現(xiàn)象的,當(dāng)然這些都可以通過(guò)加一些代碼來(lái)解決的,主要是鼠標(biāo)移出菜單外,菜單不會(huì)消失的,可以在其它的對(duì)象截取onmouseover事件來(lái)隱藏菜單的!


【本文版權(quán)歸作者與奧索網(wǎng)共同擁有，如需轉(zhuǎn)載，請(qǐng)注明作者及出處】