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>
分享到：
相关推荐
JavaScript二级联动菜单是一种常见的网页交互设计，用于提供更精细化的导航或数据筛选。在电子商务网站、行政管理系统等中，我们经常可以看到这种菜单形式，它能够根据用户在一级菜单中的选择，动态加载并显示相应的...
本文将深入探讨如何使用JavaScript实现自定义二级菜单，帮助开发者创建更加灵活和个性化的网站导航。 首先，我们要理解JavaScript在网页中的角色。JavaScript是一种客户端脚本语言，它允许我们在不刷新页面的情况下...
这些信息表明该资源是一个关于JavaScript编写的网页特效脚本，其中包含了解释该特效如何工作的说明文档，以及滑动式二级导航菜单的设计实现。这种二级导航菜单不仅功能性强，而且在视觉上也具有吸引力，使用了橘色调...
"js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单"是一个专门针对这种交互需求设计的功能。这个功能通常应用于那些层次结构较深、内容较多的网站，使用户能够更加方便地探索和定位信息。 在实现这样的导航...
"jQuery个性动画二级下拉导航菜单"就是一个专为提升用户体验而设计的交互式菜单方案。这个项目利用了JavaScript库jQuery 1.8.3的强大力量，结合精心设计的动画效果，为用户提供了直观且吸引人的二级下拉菜单。 ...
在本案例中，我们讨论的主题是“JavaScript左侧悬浮二级菜单”，这是一种常见的网页导航设计，能够提供用户友好的浏览体验。这样的菜单通常出现在网页的左侧，始终保持可见，即使用户滚动页面，菜单也会悬浮在屏幕的...
本项目“js二级导航菜单”专注于使用JavaScript技术来实现这种功能，以提升用户体验。JavaScript是一种强大的客户端脚本语言，它使得网页具有动态交互性，而无需频繁地与服务器进行通信。 首先，我们来探讨一下...
本篇将详细介绍如何使用JavaScript实现一个三级横向导航菜单。 首先，我们需要理解基本的HTML结构。一个简单的导航菜单通常由`<ul>`（无序列表）和`<li>`（列表项）元素组成。对于多级菜单，我们可以嵌套`<ul>`和`...
在这个案例中，它被用来创建动态的二级导航菜单，以及随着用户滚动页面而显示的返回顶部悬浮按钮。 文件“说明.htm”很可能是对代码的解释和使用指南，它可能会详细说明如何将这些代码整合到现有的网页项目中，包括...
在这个弧形导航菜单中，JavaScript将负责动态显示和隐藏二级菜单。通过监听用户的鼠标悬停事件，我们可以触发相应的JavaScript函数，这些函数可以改变元素的display属性，从而控制二级菜单的可见性。此外，...
在本案例中，我们讨论的是一个实现了“鼠标移动上去垂直显示二级子菜单”的下拉导航菜单，它利用了HTML的基础结构和JavaScript的动态交互功能。 首先，我们从HTML方面来看。HTML（HyperText Markup Language）是...
纯CSS二级导航菜单是一种常见的网页设计技术，它利用CSS（层叠样式表）来实现页面上的多级导航结构，而不依赖JavaScript或者其他脚本语言。这种技术对于提高网站的加载速度和可访问性非常有利，因为它减少了对服务器...
总结来说，这个“超炫的js横向二级导航菜单slide往下滑动动画效果js代码”项目，通过JavaScript和jQuery库，实现了动态、交互式的二级导航菜单。这种设计不仅提升了网页的视觉吸引力，还优化了用户的导航体验。对于...
【标题】"中英文双语下拉二级导航菜单"是一个网页设计组件，它结合了jQuery技术，用于创建具有鼠标悬停功能的双语导航菜单。这个菜单不仅可以在鼠标经过时切换中英文显示，还能展开下拉二级菜单，提供更丰富的导航...
总结来说，这个项目展示了如何使用JavaScript脚本来创建一个既美观又实用的橘色二级导航菜单，同时结合懒人图库技术优化加载性能。通过理解和实践这样的案例，开发者可以提升自己在网页交互设计和性能优化方面的技能...
《jQuery图文二级导航菜单》是一个基于JavaScript库jQuery-1.7.2.min.js实现的网页交互功能，主要用于创建一种图文并茂、操作直观的二级导航菜单。这种菜单设计通常用于网站头部，帮助用户快速访问各个主要板块，...
本项目“jQuery滑动横向二级导航菜单”聚焦于创建一个动态且响应式的二级菜单，利用jQuery库的动画效果，提升用户体验。下面将详细阐述这个项目所涉及的核心知识点。 1. **jQuery库**：jQuery是一个广泛使用的...
在这个"javascrit实现的橘色超漂亮滑动二级导航菜单demo"中，我们将探讨如何使用JavaScript来创建一个既美观又实用的二级导航菜单。 首先，导航菜单是网页设计中的关键元素，它帮助用户在网站的不同页面之间轻松...
这个压缩包中的“jquery经典二级横向导航菜单代码6”应该包含HTML结构、CSS样式表和jQuery脚本文件。通过学习和理解这些代码，开发者不仅可以创建类似的导航菜单，还能进一步提升自己在前端开发中的技能，特别是在...
在提供的文件"texiao321_1560681121"中，可能包含了示例代码、CSS样式或JavaScript脚本，用于演示如何实现上述的jQuery Metro二级导航菜单切换。通过研究这些文件，你可以更好地理解和应用这些知识点，创建自己的...