JavaScript制作二级导航菜单的脚本代码

相信对于二级导航菜单大部分朋友都不会陌生,因为大部分网站都有用到。但是二级导航菜单是如何实现的,我想大部分朋友还和zero一样一头雾水。不过没关系通过下面的实例,你和我都能解决这个问题。
2.1、在网页中适当的位置添加一个一级菜单,本例中的一级导航菜单是由一系列空的超级链接组成,这些空的超级链接执行的操作是调用自定义的javascript函数lmenu()显示对应的二级菜单,在调用时需要传递一个标记,即主菜单项的参数。
2.2、在网页中显示二级菜单的指定位置添加一个名为submenu的div层。
2.3、编写自定义的javascript函数lmenu(),用于鼠标移动到某一个一级菜单时,根据传递的参数值在页面中指定的位置显示对应的二级菜单,并设置二级菜单的名称及链接文件。
2.4、在ie浏览器中打开,并将鼠标移动到相应的一级菜单。
实例代码:

<!doctype html public “-//w3c//dtd html 4.01 transitional//en” “http://www.w3.org/tr/html4/loose.dtd“> 

<html> 

<head> 

<meta http-equiv=”content-type” content=”text/html; charset=gb2312′> 

<title>应用javascript脚本制作二级导航菜单www.3ppt.com</title> 

</head> 

<body> 

<table width=”761′ height=”218′ border=”1′ cellpadding=”1′ cellspacing=”1′ bordercolor=”#ffffff” background=”images/bg.jpg” bgcolor=”#3f8701′> 

 <tr> 

 <td valign=”top”><table width=”761′ border=”0′ cellspacing=”0′ cellpadding=”0′> 

 <tr> 

 <td height=”48′ colspan=”2′> </td> 

 </tr> 

 <tr> 

 <td height=”27′ colspan=”2′ align=”right”><table width=”761′ height=”20′ border=”0′ cellpadding=”0′ cellspacing=”0′> 

 <tr> 

 <td width=”396′> </td> 

 <td width=”67′ align=”center”><a href=”index.php教程”>首 页</a></td> 

 <td width=”75′ align=”center”><a href=”#” οnmοusemοve=”lmenu(‘新品’)”>新品上架</a></td> 

 <td width=”75′ align=”center”><a href=”#” οnmοusemοve=”lmenu(‘购物’)”>购物车</a></td> 

 <td width=”74′ align=”center”><a href=”#” οnmοusemοve=”lmenu(‘会员’)”>会员中心</a></td> 

 <td width=”61′ align=”center”><a href=”index.php”>在线帮助</a></td> 

 <td width=”13′> </td> 

 </tr> 

 </table>                </td> 

 </tr> 

 <tr> 

 <td width=”226′ height=”20′ align=”right”> </td> 

 <td width=”535′ align=”right”> <div id=”submenu”> </div></td> 

 <script language=”javascript”> 

 function lmenu(value){ 

 switch (value){ 

 case “新品”: 

 submenu.innerhtml=” <a href=’#'>商品展示</a> | <a href=’#'>销售排行榜</a> | <a href=’#'>商品查询</a> “; 

 break; 

 case “购物”: 

 submenu.innerhtml=” <a href=’#'>添加商品</a> | <a href=’#'>移出指定商品</a> |<a href=’#'>清空购物车</a> | <a href=’#'>查询购物车</a> | <a href=’#'>填写订单信息</a> “; 

 break; 

 case “会员”: 

 submenu.innerhtml=” <a href=’#'>注册会员</a> | <a href=’#'>修改会员</a> | <a href=’#'>账户查询</a> “; 

 break; 

 } 

 } 

 </script> 

 </tr> 

 </table></td> 

 </tr> 

</table> 

</body> 

</html>