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

经常在网上看到非常精彩的下拉导航菜单，用的真是非常经典，而且也经常有网友询问关于菜单的制作，所以特意找来了一例，详细分析给大家，而且此例子的扩展性也很强，你可以做成一个非常精彩的下拉菜单集！赶快跟我一起来吧，看完后你就会明白，原来做起来也是很简单的：）

先看一下演示吧(点击菜单)：

综合站点|	专业站点一|	增加的一列
搜狐 网易 新浪网 首都在线	动网 资源网 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>，再给它个精确定位，那么一切问题就都解决了，你就可以随心所欲地做出非常漂亮的下拉菜单了，还等什么，快动手吧......