豪网

 

网络编程
您现在的位置： 豪网 >> 网络编程 >> JavaScript教程 >> 正文
找找看:

用JavaScript实现网页下拉菜单方法详解

作者：佚名    文章来源：不详    点击数：    更新时间：2008-6-2

　　今天我们来讨论一下用JavaScript来实现网页下拉菜单的效果，下面的这些代码片断是我以前在网上搜集的，具体的作者也不清楚是谁，如果你知道请联系部落，我们会加以更正，好了言归正传下面我们就一起来看一下实现步骤吧。

　　今天我们讲的这个方法涉及到了三方面的主要操作，具体方法如下：

　　第一步：建立二级下拉菜单中的菜单项

　　首先我们在网页中建立下拉菜单的菜单项，代码如下：

<script language="JavaScript">
<!--
function mmLoadMenus() {
  if (window.mm_menu_0905153738_0) return;
  window.mm_menu_0905153738_0 = new Menu("root",60,22,"宋体, SimSun, NSimSun",12,"#000000","#000066","#f0f0f0","#ffffff","center","middle",3,0,1000,-5,7,true,true,false,0,false,false);
  mm_menu_0905153738_0.addMenuItem("子菜单一","location=’http://www.jsbulo.com’");
  mm_menu_0905153738_0.addMenuItem("子菜单二","location=’http://www.jsbulo.com’");
   mm_menu_0905153738_0.hideOnMouseOut=true;
   mm_menu_0905153738_0.menuBorder=0;
   mm_menu_0905153738_0.menuLiteBgColor=’#ffffff’;
   mm_menu_0905153738_0.menuBorderBgColor=’#ffffff’;
   mm_menu_0905153738_0.bgColor=’#ffffff’;
  window.mm_menu_0905162529_1 = new Menu("root",60,22,"宋体, SimSun, NSimSun",12,"#000000","#000066","#f0f0f0","#ffffff","center","middle",3,0,1000,-5,7,true,true,false,0,false,false);
  mm_menu_0905162529_1.addMenuItem("子菜单三","location=’http://www.jsbulo.com’");
  mm_menu_0905162529_1.addMenuItem("子菜单四","location=’http://www.jsbulo.com’");
  mm_menu_0905162529_1.addMenuItem("子菜单五","location=’http://www.jsbulo.com’");
   mm_menu_0905162529_1.hideOnMouseOut=true;
   mm_menu_0905162529_1.menuBorder=0;
   mm_menu_0905162529_1.menuLiteBgColor=’#ffffff’;
   mm_menu_0905162529_1.menuBorderBgColor=’#ffffff’;
   mm_menu_0905162529_1.bgColor=’#ffffff’;
  mm_menu_0905162529_1.writeMenus();
} // mmLoadMenus()
//-->
</script>

　　以上代码放置在网页代码的<head></head>之间。

　　第二步：调用外部的menu.js

　　在第一步代码的下面调用外部的menu.js程序，代码如下：

　　<script language="JavaScript1.2" src="menu.js"></script>

　　注意src=""中的路径一定要写对，点击这里下载menu.js

　　第三步：建立一级菜单项

　　下面我们就可以建立菜单栏的一级菜单项目了，建立一级菜单的同时，可以直接调用二级子菜单了，代码如下：

<a href="#" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0905153738_0,5,35,null);">菜单一</a>
<a href="#" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0905162529_1,5,35,null);">菜单二</a>
<script language="JavaScript1.2">mmLoadMenus();</script>
<a href="http://www.jsbulo.com">菜单三</a>

　　以上代码放置在网页代码的<body></body>之间。

　　到这里我们就初步实现了一个网页下拉菜单的简单效果，如果你想美化和完善这个下拉菜单的话，那么还要对原有代码做一些小小的修改，下面部落就给大家讲解一下这个JavaScript方法的简单个性化修改方法。

　　一、子菜单样式的变化

　　我们按照以上代码做出来的下拉菜单效果是横排的，效果如图一所示：


图一：横排样式

　　如果我们想要让下拉菜单以竖排样式显示的话（如图二所示），就要对第一步的代码进行一些细小的修改。


图二：竖排样式

　　大家找到如下代码：

Menu("root",60,22,"宋体, SimSun, NSimSun",12,"#000000","#000066","#f0f0f0","#ffffff","center","middle",3,0,1000,-5,7,true,true,false,0,false,false);

　　将其中的“false”改为“true”即可实现竖排下来菜单的效果了。

　　以上代码中部分重要参数说明：

　　60,22：子菜单的宽，高。

　　"#000000"：字体颜色。

　　"#000066"：鼠标经过时的字体颜色。

　　"#f0f0f0"：子菜单背景颜色。

　　"#ffffff"：鼠标经过时的背景颜色。

　　"center"：字体对其样式。

　　二、添加二级下拉菜单项目

　　本例中的二级下拉菜单只有两项，如果想在添加一项的话，那么也要对第一步的代码进行修改，修改方法很简单，只需要按照第一部代码的样式在下面添加一组下拉菜单的代码即可。

　　但是这里需要朋友们注意的是，你新添加一组下拉菜单代码后，请将新菜单的代码中的菜单名称进行修改，如将“window.mm_menu_0905162529_1”后面的文字进行修改等，不要和已有的下拉菜单代码名称相同，否则将会出错。

　　注意：不管你是怎么添加和修改子菜单项目，都要保证“mm_menu_0905162529_1.writeMenus();”代码中的“mm_menu_0905162529_1”和最后一项子菜单代码名称相同。

　　三、子菜单显示位置的调整

　　我们可以通过对第三步代码的修改来对子菜单显示的位置进行调整，需要修改的部分如下：

　　5,35：分别代表相对于左边的位置和相对于右边的位置，单位为像素（PX）。

　　四、添加一级菜单

　　需要添加一级菜单也需要修改第三步的代码，方法很简单只需要添加一个链接即可，如果该一级菜单下面有子菜单的话，只需要在其链接代码中加入鼠标效果即可，代码如下：

onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0905153738_0,5,35,null);

　　注意菜单名称一定要对应正确。

　　我在上面对用JavaScript实现下拉菜单的方法作了一个比较详细的讲解，有些地方也许不是很详细，大家可以在以后的实践中自己慢慢摸索一下。

　　为了让大家更加直观的看到效果，部落在这里给出教程中的实例页面，点击下载。


在本站查看更多关于用JavaScript实现网页下拉菜单方法详解的文章

没有任何图片文章
没有相关文章
JavaScript教程文章排行榜
  • 此栏目下没有热点文章
最近更新的文章