JavaScript制造二级导航菜单的脚本代码
日期：2014-05-16 浏览次数：20274 次
JavaScript制作二级导航菜单的脚本代码
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=”#” onmousemove=”lmenu(‘新品’)”>新品上架</a></td>
<td width=”75′ align=”center”><a href=”#” onmousemove=”lmenu(‘购物’)”>购物车</a></td>
<td width=”74′ align=”center”><a href=”#” onmousemove=”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 “购物”:
&
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=”#” onmousemove=”lmenu(‘新品’)”>新品上架</a></td>
<td width=”75′ align=”center”><a href=”#” onmousemove=”lmenu(‘购物’)”>购物车</a></td>
<td width=”74′ align=”center”><a href=”#” onmousemove=”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 “购物”:
&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
