导航菜单下拉展开的方法详解

经常在网上看到非常精彩的下拉导航菜单，用的真是非常经典，而且也经常有网友询问关于菜单的制作，所以特意找来了一例，详细分析给大家，而且此例子的扩展性也很强，你可以做成一个非常精彩的下拉菜单集！赶快跟我一起来吧，看完后你就会明白，原来做起来也是很简单的：） 先看一下演示吧(点击菜单)： <script language="JavaScript" type="text/javascript"> </script> 综合站点| 专业站点一| 增加的一列 搜狐 网易 新浪网 首都在线 动网 资源网 PHP之家 动网 资源网 PHP之家 <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var winprops = "height=500,width=500,location=no,scrollbars=no," + "menubars=no,toolbars=no,resizable=yes"; //设置链接打开窗口属性的字段，可任意更改，下面会调用它 var visMnu = ""; //设置下拉菜单一开始为空，即不显示 var actMnu, url; function menuHandler(actMnu,url) //设置点击链接后出现窗口的函数 { popup = window.open("http://"+url,"MenuPopup",winprops); //设置打开窗口的字段 hideMenu(actMnu); //隐藏actMnu菜单 } function flipMenu(actMnu) //点击链接启动的函数 { if (visMnu == "") showMenu(actMnu); //如果一开始下拉菜单为空，就显示菜单 else { if (visMnu == actMnu) hideMenu(actMnu); //如果一开始已经显示，就隐藏菜单（即第二次点击就隐藏菜单） else { hideMenu(visMnu); showMenu(actMnu); } } } //以上是设置一个菜单出现，另一个菜单消失，不会同时出现 function showMenu(actMnu) { actMnu.style.background = "#889933"; //设置弹出菜单的背景色 actMnu.style.visibility = "visible"; //设置菜单在使用此函数时可见 visMnu = actMnu; } function hideMenu(actMnu) { actMnu.style.background = ""; //不可见菜单不设置背景色 actMnu.style.visibility = "hidden"; //设置菜单在使用此函数时不可见 visMnu = ""; } // End --> </script> <table name=NaviBar border=0> <tr bgcolor=#FF9933> <td align=center onMousedown="flipMenu(document.all.Mnu1)"> 综合站点 </td> //点击链接（用onMousedown实现）就启动函数 <td align=center onMousedown="flipMenu(document.all.Mnu2)"> 专业站点一 </td> //点击链接（用onMousedown实现）就启动函数 <td align=center onMousedown="flipMenu(document.all.Mnu3)"> 增加的一列 </td> //点击链接（用onMousedown实现）就启动函数 </tr> <tr> <td valign="top"> <table id=Mnu1 width=100% style="visibility:hidden;"> //一开始设置菜单为不可见 <tr><td onClick="menuHandler(Mnu1,'www.sohu.com/')"> <a href="#">搜狐 </a> </td></tr> //点击链接（用onClick实现）就启动弹出窗口函数 <tr><td onClick="menuHandler(Mnu1,'www.163.com/')"> <a href="#">网易 </a> </td></tr> <tr><td onClick="menuHandler(Mnu1,'www.sina.com/')"> <a href="#">新浪网 </a> </td></tr> <tr><td onClick="menuHandler(Mnu1,'www.263.net/')"> <a href="#">首都在线 </a> </td></tr> </table> </td> <td valign="top"> <table id=Mnu2 width=100% style="visibility:hidden;"> //一开始设置菜单为不可见 <tr><td onClick="menuHandler(Mnu2,'www.aspsky.com/')"> <a href="#"> 动网 </a> </td></tr> <tr><td onClick="menuHandler(Mnu2,'www.jzzy.com/')"> <a href="#"> 资源网 </a> </td></tr> <tr><td onClick="menuHandler(Mnu2,'www.phpuser.com/')"> <a href="#"> PHP之家 </a> </td></tr> </table> </td> <td valign="top"> <table id=Mnu3 width=100% style="visibility:hidden;"> //一开始设置菜单为不可见 <tr><td onClick="menuHandler(Mnu3,'www.aspsky.com/')"> <a href="#"> 动网 </a> </td></tr> <tr><td onClick="menuHandler(Mnu3,'www.jzzy.com/')"> <a href="#"> 资源网 </a> </td></tr> <tr><td onClick="menuHandler(Mnu3,'www.phpuser.com/')"> <a href="#"> PHP之家 </a> </td></tr> </table> </td> </tr> </table> 注意：还有很重要的一点要说明，大家可能觉得这个菜单下面会显示一片空白，其实这个问题不难解决的，你可以把那个<table>改成<div>，再给它个精确定位，那么一切问题就都解决了，你就可以随心所欲地做出非常漂亮的下拉菜单了，还等什么，快动手吧......