DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> 用DHTML來模擬實現下拉菜單
用DHTML來模擬實現下拉菜單
編輯:XML詳解     
我在許多的網站上看到上面都有下拉菜單的,使得網站更栩栩如生了!象微軟的主頁,後來我想假如單用div和Javascript是否也能實現了,通過幾次實驗也總於成功了,現在把自己想法告訴大家,希望大家網頁也加上下拉菜單使網爺更生動.
以前DOS下編寫應用程序都要面臨著界面編寫的,象菜單這些東西也要自己從頭到尾都要自己編的,到了win時代,通過事件驅動我們就很容易編寫了,何況菜單集成到系統裡了,在IE下編寫菜單也是基於通過捕獲鼠標事件來響應菜單下拉和隱藏的,
我們首先要用表格來顯示菜單條,
<body>
<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: 45px;

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)"> </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: 140px;

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)"> </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">
<!--
var menushow;
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>
</body>
上面是我從調試代碼上截下來的,要想得到好看的結果需要改變一下位子關系的,當然還要注意一下鼠標移動時候是否菜單會出現異常現象的,當然這些都可以通過加一些代碼來解決的,主要是鼠標移出菜單外,菜單不會消失的,可以在其它的對象截取onmouSEOver事件來隱藏菜單的!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved