使用 JavaScript 实现响应式联动菜单212

在现代 Web 开发中，简洁直观的用户界面至关重要。联动菜单是一个可以极大地改善用户体验的强大功能，允许用户根据他们的选择访问相关选项。

什么是联动菜单？

联动菜单是一种分层菜单，其中子菜单选项会根据其父菜单项的当前选择而动态更新。例如，在一个电子商务网站上，用户可能会看到包含多个类别（如服装、电子产品和家居用品）的一级菜单。当用户将光标悬停在其中一个类别（例如服装）上时，二级菜单将显示该类别的子类别（例如男士服装、女士服装和配饰）。

JavaScript 中的联动菜单

JavaScript 提供了一种强大的方式来创建高度动态和交互式的联动菜单。以下步骤概述了使用 JavaScript 实现联动菜单的过程：

创建 HTML 结构

<nav>
<ul id="main-menu">
<li><a href="#">服装</a></li>
<li><a href="#">电子产品</a></li>
<li><a href="#">家居用品</a></li>
</ul>
<ul id="sub-menu">
<li><a href="#">男士服装</a></li>
<li><a href="#">女士服装</a></li>
<li><a href="#">配饰</a></li>
</ul>
</nav>

我们使用一个包含两个无序列表的主导航结构。主菜单（#main-menu）包含一级菜单项，而子菜单（#sub-menu）包含二级菜单项。

添加 CSS 样式

nav {
width: 100%;
height: 50px;
background-color: #333;
}
#main-menu {
float: left;
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
margin: 0 10px;
}
#main-menu li a {
color: #fff;
text-decoration: none;
}
#sub-menu {
display: none;
position: absolute;
background-color: #fff;
}
#sub-menu li {
width: 150px;
padding: 5px;
}
#sub-menu li a {
color: #000;
text-decoration: none;
}

CSS 样式用于定义菜单的外观和布局。我们将主菜单设置为浮动到左侧并包含内联块菜单项。子菜单最初隐藏，在绝对位置显示为白色背景。

编写 JavaScript

const mainMenu = ("main-menu");
const subMenu = ("sub-menu");
("mouseover", (e) => {
if ( === "A") {
// 获取当前父菜单项
const parentItem = ;
// 隐藏所有其他子菜单
const allSubMenu = (".sub-menu");
((menu) => {
= "none";
});
// 显示当前子菜单
= "block";
}
});
("mouseleave", () => {
// 隐藏子菜单
= "none";
});

JavaScript 处理菜单交互。我们首先获取主菜单和子菜单的引用。然后，我们添加一个鼠标悬停事件侦听器到主菜单。当用户将光标悬停在主菜单项上时，该事件侦听器将显示与该项关联的子菜单。我们还添加了一个鼠标离开事件侦听器，它在用户将光标移出主菜单时隐藏子菜单。

响应式联动菜单

为了创建响应式联动菜单，我们需要考虑小屏幕设备上的菜单行为。我们可以通过以下方式实现：
使用媒体查询：我们可以使用 CSS 媒体查询来根据屏幕宽度更改菜单的外观。例如，我们在小屏幕上隐藏子菜单并使用汉堡包图标显示一个弹出菜单。
使用 JavaScript 检测窗口大小：我们可以使用 JavaScript 检测窗口大小并相应地调整菜单行为。例如，在小屏幕上，我们可以在用户单击主菜单项时显示一个下拉菜单。

使用 JavaScript 创建联动菜单是一个强大的技术，可以极大地改善用户体验。通过遵循上面概述的步骤，您可以创建交互式且动态的菜单，根据用户的选择量身定制选项。随着响应式设计的重要性越来越高，确保您的联动菜单在各种设备上无缝工作至关重要。

2025-02-10

---

上一篇：JavaScript 形参的终极指南

下一篇：JavaScript 事件机制：理解交互式 Web 应用程序的基础