DHTML来模拟实现下拉菜单
日期：2011-04-24 浏览次数：21021 次
我在许多的网站上看到上面都有下拉菜单的,使得网站更栩栩如生了!象微软的主页,后来我想假如单用div和JAvascript是否也能实现了,通过几次实验也总于成功了,现在把自己想法告诉大家,希望大家网页也加上下拉菜单使网爷更生动.
以前DOS下编写应用程序都要面临着界面编写的,象菜单这些东西也要自己从头到尾都要自己编的,到了win时代,通过事件驱动我们就很容易编写了,何况菜单集成到系统里了,在IE下编写菜单也是基于通过捕获鼠标事件来响应菜单下拉和隐藏的,
我们首先要用表格来显示菜单条,
<table>
<tr>
<td height="9" width="100" align=center bgcolor="#33FFFF" >menu1</td>
<td height="9" width="100" align=center bgcolor="#33FFFF" >menu1</td>
<tr>
<table>
<div id="menuwenxue" style="position:absolute; width:90px; height:115px; z-index:1; left: 245px; top: 75px; visibility: hidden" >
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td height="10" class="menufont" > </td>
</tr>
<tr>
<td height="28" align=center class="menufont" bgcolor=#ff00ff ><a href="JavaScript:alert('menu1_item1')">menu1_item1</a></td>
</tr>
<tr>
<td height="31" align=center bgcolor=#ff00ff ><a href="JavaScript:alert('menu1_item2')">menu1_item2</a></td>
</tr>
<tr>
<td height="30" align=center bgcolor=#ff00ff ><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" >
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td height="10" > </td>
</tr>
<tr>
<td height="27" align=center bgcolor=#ff00ff ><a href="JavaScript:alert('menu2_item2')">menu2_item1</a></td>
</tr>
<tr>
<td height="31" align=center bgcolor=#ff00ff ><a href="JavaScript:alert('menu2_item2')">menu2_item2</a></td>
</tr>
<tr>
<td height="30" align=center bgcolor=#ff00ff ><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>
上面是我从调试代码上截下来的,要想得到好看的结果需要改变一下位子关系的,当然还要注意一下鼠标移动时候是否菜单会出现异常现象的,当然这些都可以通过加一些代码来解决的,主要是鼠标移出菜单外,菜单不会消失的,可以在其它的对象截取onmouseover事件来隐藏菜单的!
【本文版权归作者与奥索网共同拥有，如需转载，请注明作者及出处】
以前DOS下编写应用程序都要面临着界面编写的,象菜单这些东西也要自己从头到尾都要自己编的,到了win时代,通过事件驱动我们就很容易编写了,何况菜单集成到系统里了,在IE下编写菜单也是基于通过捕获鼠标事件来响应菜单下拉和隐藏的,
我们首先要用表格来显示菜单条,
<table>
<tr>
<td height="9" width="100" align=center bgcolor="#33FFFF" >menu1</td>
<td height="9" width="100" align=center bgcolor="#33FFFF" >menu1</td>
<tr>
<table>
<div id="menuwenxue" style="position:absolute; width:90px; height:115px; z-index:1; left: 245px; top: 75px; visibility: hidden" >
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td height="10" class="menufont" > </td>
</tr>
<tr>
<td height="28" align=center class="menufont" bgcolor=#ff00ff ><a href="JavaScript:alert('menu1_item1')">menu1_item1</a></td>
</tr>
<tr>
<td height="31" align=center bgcolor=#ff00ff ><a href="JavaScript:alert('menu1_item2')">menu1_item2</a></td>
</tr>
<tr>
<td height="30" align=center bgcolor=#ff00ff ><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" >
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td height="10" > </td>
</tr>
<tr>
<td height="27" align=center bgcolor=#ff00ff ><a href="JavaScript:alert('menu2_item2')">menu2_item1</a></td>
</tr>
<tr>
<td height="31" align=center bgcolor=#ff00ff ><a href="JavaScript:alert('menu2_item2')">menu2_item2</a></td>
</tr>
<tr>
<td height="30" align=center bgcolor=#ff00ff ><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>
上面是我从调试代码上截下来的,要想得到好看的结果需要改变一下位子关系的,当然还要注意一下鼠标移动时候是否菜单会出现异常现象的,当然这些都可以通过加一些代码来解决的,主要是鼠标移出菜单外,菜单不会消失的,可以在其它的对象截取onmouseover事件来隐藏菜单的!
【本文版权归作者与奥索网共同拥有，如需转载，请注明作者及出处】
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
