应用javascript脚本制作二级导航菜单

最新推荐文章于 2023-11-18 22:58:50 发布

原创最新推荐文章于 2023-11-18 22:58:50 发布 · 927 阅读

1 ·

CC 4.0 BY-SA版权

学习笔记专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的下拉菜单栏功能，该菜单栏包括新品上架、购物车和会员中心三个主要部分，每个部分都有不同的子选项。通过简单的鼠标悬停操作，用户可以查看到更多的导航链接。

<html>
<head>
<script language="javascript">
	
	function Lmenu(value){
		switch(value){
			case "新品":
				submenu.innerHTML="<br><a href='#'>商品展示</a>|<a href='#'>销售排行榜</a>|<a href='#'>商品查询</a>";
				break;
			case "购物":
				submenu.innerHTML="<br><a href='#'>添加商品</a>|<a href='#'>查询购物车</a>|<a href='#'>填写订单信息</a>";
				break;
			case "会员":
				submenu.innerHTML="<br><a href='#'>注册会员</a>|<a href='#'>修改会员</a>|<a href='#'>账号查询</a>";
				break;
			
		}
	}

</script>
</head>
<body>

<table width="761" height="20" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="67" align="center"><a href="#">首 页</a></td>
		<td width="75" align="center"><a href="#" onMouseMove="Lmenu('新品')">新品上架</a><div id="submenu"> </div></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="#">在线帮助</a></td>
	</tr>
</table>
</body>
</html>