实现响应式导航菜单：点击链接自动关闭菜单的JavaScript实践-html教程-PHP中文网

实现响应式导航菜单：点击链接自动关闭菜单的JavaScript实践

DDD

发布： 2025-11-06 13:05:01

原创

575人浏览过

实现响应式导航菜单：点击链接自动关闭菜单的JavaScript实践

本文详细阐述了如何优化响应式导航菜单的用户体验。针对常见的汉堡菜单在点击导航链接后仍保持打开状态的问题，教程提供了基于javascript的解决方案。通过为导航链接添加统一类名并监听点击事件，我们能够实现在用户选择目标页面后，自动关闭菜单，从而提升网站的交互流畅性和用户友好性。

在现代Web开发中，响应式导航菜单（通常以“汉堡”图标形式呈现）是移动设备上不可或缺的UI元素。当用户点击汉堡图标时，一个全屏或侧边导航菜单会展开，显示网站的各个部分。然而，一个常见的用户体验问题是，在用户点击菜单中的某个链接并跳转到目标内容后，菜单仍然保持打开状态。这不仅可能遮挡部分内容，也使得用户需要额外操作才能关闭菜单。本教程将指导您如何通过JavaScript实现点击导航链接后自动关闭菜单的功能，从而优化用户体验。

初始设置：汉堡菜单的开合逻辑

首先，我们来看一个典型的汉堡菜单实现，它使用JavaScript来切换导航列表的可见性。

HTML 结构：

<header>
    <div class="hamburger" id="hamburger"></div>
    <ul class="list" id="list">
        <li><a href="#home">HOME</a></li>
        <li><a href="#services">SERVICES</a></li>
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#menu">MENU</a></li>
    </ul>
</header>

<div class="contents">
    <h1 id="home">HOME</h1>
    <h1 id="services">SERVICES</h1>
    <h1 id="about">ABOUT</h1>
    <h1 id="menu">MENU</h1>
</div>

登录后复制

CSS 样式：

立即学习“Java免费学习笔记（深入）”；

/* 基础重置 */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth; /* 平滑滚动效果 */
}
ul {
    list-style-type: none; /* 移除列表样式 */
}

/* 导航列表的默认隐藏状态 */
.list {
    list-style-type: none;
    display: none; /* 默认隐藏 */
}

/* 导航列表的显示状态 */
.list.show {
    position: fixed;
    display: block; /* 显示 */
    inset: 0 0 0 0; /* 全屏覆盖 */
    z-index: 99;
    text-align: center;
    background-color: hsl(0 0% 0% / 0.6); /* 半透明背景 */
    padding: min(43vh, 20rem) 2rem; /* 垂直居中内容 */
}

/* 头部和汉堡按钮样式 */
header {
    display: flex;
    justify-content: space-between;
}
.hamburger {
    width: 50px;
    height: 50px;
    background-color: red;
    cursor: pointer;
    position: absolute;
    z-index: 999;
}

/* 页面内容样式 */
h1 {
    margin: 20rem 0;
}
.contents {
    position: absolute;
    left: 50%;
    top: 120%;
    transform: translate(-50%, -50%);
}

登录后复制

JavaScript 逻辑：

const button = document.getElementById("hamburger");
const list = document.getElementById("list");

button.addEventListener("click", () => {
    list.classList.toggle('show'); // 点击汉堡按钮切换菜单显示/隐藏
});

登录后复制

上述代码实现了点击汉堡按钮时，通过切换 list 元素的 show 类来显示或隐藏导航菜单。然而，当菜单处于显示状态时，点击其中的任何一个导航链接（如“HOME”、“SERVICES”等），菜单并不会自动关闭。

解决方案：监听导航链接点击事件

为了解决上述问题，我们需要为每个导航链接添加一个点击事件监听器。当用户点击这些链接时，除了触发默认的页面滚动行为外，我们还需要显式地移除导航菜单的 show 类，使其关闭。

步骤一：修改HTML，为导航链接添加通用类名

为了方便地选中所有导航链接，我们给每个 <a> 标签添加一个统一的类名，例如 nav-item。

<ul class="list" id="list">
    <li><a href="#home" class="nav-item">HOME</a></li>
    <li><a href="#services" class="nav-item">SERVICES</a></li>
    <li><a href="#about" class="nav-item">ABOUT</a></li>
    <li><a href="#menu" class="nav-item">MENU</a></li>
</ul>

登录后复制

步骤二：添加JavaScript逻辑，监听导航链接点击事件

现在，我们可以使用 document.querySelectorAll 来选中所有带有 nav-item 类的元素，并为它们各自添加点击事件监听器。在事件回调函数中，我们直接移除 list 元素的 show 类。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

const navItems = document.querySelectorAll('.nav-item'); // 注意选择器是'.nav-item'
navItems.forEach((navItem) => {
    navItem.addEventListener('click', () => {
        list.classList.remove("show"); // 点击导航链接时，移除'show'类以关闭菜单
    });
});

登录后复制

完整示例代码

将上述修改整合到一起，形成一个完整的、功能完善的汉堡菜单实现：

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navigation Menu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="hamburger" id="hamburger"></div>
        <ul class="list" id="list">
            <li><a href="#home" class="nav-item">HOME</a></li>
            <li><a href="#services" class="nav-item">SERVICES</a></li>
            <li><a href="#about" class="nav-item">ABOUT</a></li>
            <li><a href="#menu" class="nav-item">MENU</a></li>
        </ul>
    </header>

    <div class="contents">
        <h1 id="home">HOME</h1>
        <h1 id="services">SERVICES</h1>
        <h1 id="about">ABOUT</h1>
        <h1 id="menu">MENU</h1>
    </div>

    <script src="script.js"></script>
</body>
</html>

登录后复制

CSS (style.css):

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
html {
    scroll-behavior: smooth;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: inherit;
}

.list {
    display: none;
    list-style-type: none;
}
.list.show {
    position: fixed;
    display: flex; /* 使用flexbox居中内容 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    inset: 0 0 0 0;
    z-index: 99;
    background-color: hsl(0 0% 0% / 0.8); /* 调整背景透明度 */
    padding: 2rem;
    color: white;
}
.list.show li {
    margin-bottom: 2rem;
}
.list.show a {
    font-size: 2rem;
    font-weight: bold;
    transition: color 0.3s ease;
}
.list.show a:hover {
    color: lightblue;
}

header {
    display: flex;
    justify-content: flex-end; /* 将汉堡按钮置于右侧 */
    padding: 1rem;
    position: relative;
    z-index: 100; /* 确保汉堡按钮在菜单之上 */
}
.hamburger {
    width: 50px;
    height: 50px;
    background-color: red;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}
/* 可以为汉堡按钮添加图标，例如使用伪元素或SVG */
.hamburger::before {
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background-color: white;
    box-shadow: 0 -10px 0 white, 0 10px 0 white;
}

.contents {
    padding: 2rem;
    text-align: center;
}
.contents h1 {
    margin: 15rem 0; /* 调整间距以便滚动 */
    font-size: 3rem;
    color: #333;
}

登录后复制

JavaScript (script.js):

const button = document.getElementById("hamburger");
const list = document.getElementById("list");
const navItems = document.querySelectorAll('.nav-item');

// 监听汉堡按钮点击事件，切换菜单显示/隐藏
button.addEventListener("click", () => {
    list.classList.toggle('show');
});

// 监听每个导航链接点击事件，关闭菜单
navItems.forEach((navItem) => {
    navItem.addEventListener('click', () => {
        list.classList.remove("show"); // 移除'show'类以关闭菜单
    });
});

登录后复制

注意事项与最佳实践

classList.remove vs. classList.toggle： 在关闭菜单的场景中，使用 classList.remove("show") 比 classList.toggle("show") 更安全。因为 toggle 会根据当前是否存在该类来决定添加或移除，如果菜单在某种情况下已经关闭，而 toggle 被调用，它可能会意外地重新打开菜单。而 remove 则确保无论菜单当前状态如何，都会尝试将其关闭。
可访问性 (Accessibility)： 为了提升用户体验，特别是对于使用键盘或屏幕阅读器的用户，可以考虑添加以下增强：
- ARIA 属性： 为汉堡按钮添加 aria-expanded 和 aria-controls 属性，并在菜单开合时动态更新 aria-expanded 的值。
- 键盘导航： 确保用户可以使用 Tab 键在菜单项之间导航，并使用 Enter 键激活链接。同时，可以考虑在菜单打开时，允许用户按 Esc 键关闭菜单。
事件委托 (Event Delegation)： 对于包含大量导航链接的复杂菜单，为每个链接单独添加事件监听器可能会略微影响性能。在这种情况下，可以考虑使用事件委托，即只在父元素（例如 ul.list）上添加一个事件监听器，然后通过 event.target 来判断是哪个子链接被点击。
```
list.addEventListener('click', (event) => {
    if (event.target.classList.contains('nav-item')) {
        list.classList.remove("show");
    }
});
```
登录后复制
这种方法减少了事件监听器的数量，提高了效率。
动画效果： 为了更平滑的用户体验，可以在CSS中为菜单的显示/隐藏添加过渡动画。例如，为 opacity 和 transform 属性添加 transition。