查看完整版本: 导航菜单下拉展开的方法详解

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

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


%26lt;SCRIPTLANGUAGE="JavaScript"%26gt;
%26lt;!--Begin
varwinprops="height=500,width=500,location=no,scrollbars=no,"
+"menubars=no,toolbars=no,resizable=yes";//设置链接打开窗口属性的字段，可任意更改，下面会调用它
varvisMnu="";//设置下拉菜单一开始为空，即不显示
varactMnu,url;
functionmenuHandler(actMnu,url)//设置点击链接后出现窗口的函数
{
popup=window.open("http://"+url,"MenuPopup",winprops);//设置打开窗口的字段
hideMenu(actMnu);//隐藏actMnu菜单
}
functionflipMenu(actMnu)//点击链接启动的函数
{
if(visMnu=="")
showMenu(actMnu);//如果一开始下拉菜单为空，就显示菜单
else
{
if(visMnu==actMnu)
hideMenu(actMnu);//如果一开始已经显示，就隐藏菜单（即第二次点击就隐藏菜单）
else
{
hideMenu(visMnu);
showMenu(actMnu);
}
}
}
//以上是设置一个菜单出现，另一个菜单消失，不会同时出现
functionshowMenu(actMnu)
{
actMnu.style.background="#889933";//设置弹出菜单的背景色
actMnu.style.visibility="visible";//设置菜单在使用此函数时可见
visMnu=actMnu;
}
functionhideMenu(actMnu)
{
actMnu.style.background="";//不可见菜单不设置背景色
actMnu.style.visibility="hidden";//设置菜单在使用此函数时不可见
visMnu="";
}
//End--%26gt;
%26lt;/script%26gt;
%26lt;tablename=NaviBarborder=0%26gt;
%26lt;trbgcolor=#FF9933%26gt;
%26lt;tdalign=center%26gt;综合站点%26lt;/td%26gt;
//点击链接（用onMousedown实现）就启动函数
%26lt;tdalign=center%26gt;专业站点一%26lt;/td%26gt;
//点击链接（用onMousedown实现）就启动函数
%26lt;tdalign=center%26gt;增加的一列%26lt;/td%26gt;
//点击链接（用onMousedown实现）就启动函数
%26lt;/tr%26gt;
%26lt;tr%26gt;
%26lt;tdvalign="top"%26gt;
%26lt;tableid=Mnu1width=100%style="visibility:hidden;"%26gt;
//一开始设置菜单为不可见
%26lt;tr%26gt;%26lt;td%26gt;
%26lt;ahref="#"%26gt;搜狐%26lt;/a%26gt;%26lt;/td%26gt;%26lt;/tr%26gt;
//点击链接（用onClick实现）就启动弹出窗口函数
%26lt;tr%26gt;%26lt;td%26gt;
%26lt;ahref="#"%26gt;[wiki]网易[/wiki]%26lt;/a%26gt;%26lt;/td%26gt;%26lt;/tr%26gt;
%26lt;tr%26gt;%26lt;td%26gt;
%26lt;ahref="#"%26gt;新浪网%26lt;/a%26gt;%26lt;/td%26gt;%26lt;/tr%26gt;
%26lt;tr%26gt;%26lt;td%26gt;
%26lt;ahref="#"%26gt;首都在线%26lt;/a%26gt;%26lt;/td%26gt;%26lt;/tr%26gt;
%26lt;/table%26gt;
%26lt;/td%26gt;
%26lt;tdvalign="top"%26gt;
%26lt;tableid=Mnu2width=100%style="visibility:hidden;"%26gt;
//一开始设置菜单为不可见
%26lt;tr%26gt;%26lt;td%26gt;%26lt;ahref="#"%26gt;
动网%26lt;/a%26gt;%26lt;/td%26gt;%26lt;/tr%26gt;
%26lt;tr%26gt;%26lt;td%26gt;%26lt;ahref="#"%26gt;
资源网%26lt;/a%26gt;%26lt;/td%26gt;%26lt;/tr%26gt;
%26lt;tr%26gt;%26lt;td%26gt;%26lt;ahref="#"%26gt;
[wiki]PHP[/wiki]之家%26lt;/a%26gt;%26lt;/td%26gt;%26lt;/tr%26gt;
%26lt;/table%26gt;
%26lt;/td%26gt;
%26lt;tdvalign="top"%26gt;
%26lt;tableid=Mnu3width=100%style="visibility:hidden;"%26gt;
//一开始设置菜单为不可见
%26lt;tr%26gt;%26lt;td%26gt;%26lt;ahref="#"%26gt;
动网%26lt;/a%26gt;%26lt;/td%26gt;%26lt;/tr%26gt;
%26lt;tr%26gt;%26lt;td%26gt;%26lt;ahref="#"%26gt;
资源网%26lt;/a%26gt;%26lt;/td%26gt;%26lt;/tr%26gt;
%26lt;tr%26gt;%26lt;td%26gt;%26lt;ahref="#"%26gt;
PHP之家%26lt;/a%26gt;%26lt;/td%26gt;%26lt;/tr%26gt;
%26lt;/table%26gt;
%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;/table%26gt;
注意：还有很重要的一点要说明，大家可能觉得这个菜单下面会显示一片空白，其实这个问题不难解决的，你可以把那个%26lt;table%26gt;改成%26lt;div%26gt;，再给它个精确定位，那么一切问题就都解决了，你就可以随心所欲地做出非常漂亮的下拉菜单了，还等什么，快动手吧......