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 “购物”:
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>
分享到：
相关推荐
js特效脚本含源码和说明橘色超漂亮滑动二级导航菜单本资源系百度网盘分享地址
网页纵向产品分类导航，横向二级菜单，适合商城使用，类似苏宁易购网站的左侧导航菜单，与以前发布的一款仿京东的英文菜单差不多，样式和功能新颖，兼容性方面也都不错的实用菜单。
内容索引:脚本资源,CSS特效,菜单 超级经典的支持二级分类的网站横向导航菜单，CSS+JavaScript联手打造，很多网站都在用。 因为用到了不少的图片资源，因此这里将其一并打包供下载。功能演示可以看上边的截图，...
内容索引:脚本资源,Ajax/JavaScript,下拉菜单 JavaScript带图片的下拉导航菜单实例，当鼠标移过图片的时候，展现出对应的二级菜单，移开则消失，图片是随便找的，请根据自己的需要重新制作。
11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹...
11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹...
实例047 二级导航菜单 74 实例048 半透明背景的下拉菜单 76 实例049 展开式导航条 80 实例050 用层制作下拉菜单1 81 实例051 用层制作下拉菜单2 84 1.10 侧导航条设计 86 实例052 自动隐藏式菜单 87 实例053 收缩式...
内容索引:脚本资源,Ajax/JavaScript,树形菜单 CSS+Js二级树形菜单演示示例，使用了不少的修饰图片，欢迎下载。
黑色动感菜单导航模块，下拉缓冲效果，来自腾讯旗下穿越火线游戏官方网站，Js代码，配合黑色背景和动态的操作体验，让这款菜单变得很诱人，鼠标对应每个主菜单，会滑出二级菜单，在菜单显示区域可布局文字段落或图片...
内容索引:脚本资源,Ajax/JavaScript,Cookie,防刷菜单 我们在制作菜单的时候，有时候想让菜单有个明确的导航，在当前位置指引用户，这就需要使用Cookie或是用动态程序控制，不过使用Cookie有些麻烦，而且技术难度大...
8.6 实现导航菜单动画 241 8.6.1 HTML 242 8.6.2 CSS 243 8.6.3 JavaScript 243 8.6.4 教程 244 第9章 扩展Web表单 247 9.1 理解表单 248 9.1.1 选择表单元素 249 9.1.2 获取和设置表单元素的值 251 9.1.3 确定按钮...
内容索引:脚本资源,Ajax/JavaScript,动感菜单,导航 穿越火线黑色超动感菜单导航模块，Js代码，配合黑色背景和动态的操作体验，让这款菜单变得很诱人，鼠标对应每个主菜单，会滑出二级菜单，在菜单显示区域可布局...
Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字 Java波浪文字，一个利用Java处理字符的实例，可以设置运动方向参数，显示文本的字符数组，高速文本颜色，显示字体的 FontMetrics对象，...
Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字 Java波浪文字，一个利用Java处理字符的实例，可以设置运动方向参数，显示文本的字符数组，高速文本颜色，显示字体的 FontMetrics对象...
完整的在.net后台执行javascript脚本集合 ASP.NET 中的正则表达式 常用的匹配正则表达式和实例 经典正则表达式 delegate vs. event 我是谁？[C#] 表达式计算引擎 正式发布表达式计算引擎WfcExp V0.9(附源码) 运算...
实例072 二级导航菜单 105 实例073 半透明背景的下拉菜单 106 实例074 展开式导航条 110 实例075 解释型菜单 111 实例076 自动隐藏的弹出式菜单 112 实例077 收缩式导航菜单 114 实例078 树状导航菜单...
同时保持蒸提供全面的支持，无缝集成的IDE（语法着色，代码导航，重构等）的语法和操作代码完全分离。最大限度地减少时间和费用开发自定义的DSL（领域特定语言在Java）要求。 日志服务器 Apache Flume.tar Flume 是...
同时保持蒸提供全面的支持，无缝集成的IDE（语法着色，代码导航，重构等）的语法和操作代码完全分离。最大限度地减少时间和费用开发自定义的DSL（领域特定语言在Java）要求。 日志服务器 Apache Flume.tar Flume 是...
-如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...