JavaScript实现点击导航链接后自动关闭移动端菜单-html教程-PHP中文网

JavaScript实现点击导航链接后自动关闭移动端菜单

本教程将指导如何在响应式网页设计中，通过javascript实现点击汉堡菜单内的导航链接后，自动关闭全屏覆盖式菜单的功能。我们将通过为导航链接添加统一类名并监听点击事件，移除控制菜单可见性的css类，从而优化用户体验。

引言：移动端导航菜单的交互挑战

在现代响应式网页设计中，汉堡菜单（Hamburger Menu）是一种常见的移动端导航模式。它通常以一个图标的形式存在，点击后会展开一个全屏覆盖或侧边滑出的导航菜单。用户在打开菜单后，会期望点击菜单中的任何导航链接时，不仅能跳转到目标页面或页面区域，菜单本身也能自动关闭，以提供流畅直观的用户体验。如果菜单在点击链接后依然保持打开状态，会显得冗余并可能阻碍用户查看内容。

基础结构：构建可切换的导航菜单

首先，我们来看一个典型的汉堡菜单及其初始交互逻辑。

HTML结构

以下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样式

CSS样式通过控制.list元素的display属性以及添加.show类来管理菜单的显示与隐藏。当.list元素拥有show类时，它将以全屏覆盖的形式显示。

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

/* 默认隐藏导航列表 */
.list {
    list-style-type: none;
    display: none;
    margin: 0;
    padding: 0;
}

/* 当 .list 元素具有 'show' 类时，显示为全屏覆盖菜单 */
.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;
}

/* 汉堡按钮样式 (示例) */
.hamburger {
    width: 50px;
    height: 50px;
    background-color: red;
    cursor: pointer;
    position: absolute;
    z-index: 999;
}

/* 其他通用样式 */
html {
    scroll-behavior: smooth; /* 启用平滑滚动 */
}

登录后复制

JavaScript交互

以下JavaScript代码实现了点击汉堡按钮时，导航列表的显示与隐藏切换功能：

const button = document.getElementById("hamburger"); // 获取汉堡按钮
const list = document.getElementById("list");       // 获取导航列表

// 为汉堡按钮添加点击事件监听器
button.addEventListener("click", () => {
    list.classList.toggle('show'); // 切换导航列表的 'show' 类
});

登录后复制

至此，我们已经实现了一个基本的汉堡菜单，可以通过点击按钮来打开和关闭。然而，当菜单打开后，点击其中的导航链接并不会自动关闭菜单，这便是我们需要解决的核心问题。

实现点击导航项自动关闭菜单

要解决点击导航链接后菜单不关闭的问题，我们需要为每个导航链接添加额外的事件处理逻辑。

核心思路

我们的目标是：当用户点击导航菜单中的任何一个链接时，除了触发默认的页面滚动或跳转行为外，还要显式地将导航菜单关闭（即移除其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>

登录后复制

通过添加nav-item类，我们现在有了一个统一的选择器来获取所有需要监听的导航链接。

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

查看详情

第二步：编写JavaScript，监听导航链接点击事件

接下来，我们需要修改JavaScript代码，以实现点击导航链接时自动关闭菜单的功能。

// 获取汉堡按钮和导航列表
const button = document.getElementById("hamburger");
const list = document.getElementById("list");

// 获取所有带有 'nav-item' 类的导航链接
const navItems = document.querySelectorAll('.nav-item');

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

// 遍历所有导航链接，并为每个链接添加点击事件监听器
navItems.forEach((navItem) => {
    navItem.addEventListener('click', () => {
        // 当导航链接被点击时，移除导航列表的 'show' 类，从而关闭菜单
        list.classList.remove("show");
    });
});

登录后复制

通过上述修改，当用户点击汉堡按钮时，菜单会打开或关闭。而当菜单打开后，用户点击其中的任何一个nav-item链接，菜单的show类会被移除，从而实现菜单的自动关闭，同时浏览器会滚动到对应的页面锚点（如果链接是内部锚点）。

完整代码示例

为了提供一个完整的参考，以下是整合了HTML、关键CSS和JavaScript的示例代码：

HTML (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式导航菜单</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;
}
html {
    scroll-behavior: smooth; /* 启用平滑滚动 */
}
ul {
    list-style-type: none;
}
.list {
    list-style-type: none;
    display: none; /* 默认隐藏 */
}
.list.show {
    position: fixed;
    display: block; /* 带有 'show' 类时显示 */
    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 (script.js)

const button = document.getElementById("hamburger"); // 获取汉堡按钮
const list = document.getElementById("list");       // 获取导航列表

// 获取所有带有 'nav-item' 类的导航链接
const navItems = document.querySelectorAll('.nav-item');

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

// 遍历所有导航链接，并为每个链接添加点击事件监听器
navItems.forEach((navItem) => {
    navItem.addEventListener('click', () => {
        // 当导航链接被点击时，移除导航列表的 'show' 类，从而关闭菜单
        list.classList.remove("show");
    });
});

登录后复制

注意事项与优化

事件委托（Event Delegation）： 对于包含大量导航项的复杂菜单，为每个链接单独添加事件监听器可能会影响性能。在这种情况下，可以使用事件委托。即只在父元素（如ul.list）上添加一个事件监听器，然后通过event.target来判断是哪个子链接被点击，并执行相应的关闭菜单逻辑。
```
list.addEventListener('click', (event) => {
    if (event.target.classList.contains('nav-item')) {
        list.classList.remove('show');
    }
});
```
登录后复制
这种方式可以减少内存占用，尤其适用于动态添加或移除导航项的场景。
用户体验与平滑滚动： html { scroll-behavior: smooth; } CSS属性可以确保点击锚点链接时页面平滑滚动，而不是生硬地跳跃，这能显著提升用户体验。
可访问性（Accessibility）： 为了更好的可访问性，特别是对于屏幕阅读器用户，建议为汉堡按钮添加ARIA属性，如aria-controls（指向导航列表的ID）和aria-expanded（指示菜单当前是否展开）。当菜单打开/关闭时，相应地更新aria-expanded的值。
动画效果： 如果希望菜单关闭时有更平滑的过渡效果，可以在CSS中为display属性或其他控制菜单位置/透明度的属性添加transition。然而，display属性通常不能直接过渡，可以考虑使用opacity和visibility结合transition。

总结

本教程详细介绍了如何通过JavaScript实现点击移动端导航菜单中的链接后自动关闭菜单的功能。核心思想是利用CSS类来控制菜单的可见性，并通过JavaScript监听导航链接的点击事件，在事件触发时移除控制菜单显示状态的CSS类。这种方法简单、高效且易于维护，是实现良好用户体验的关键一步。通过灵活运用DOM操作和事件监听，我们可以创建出响应迅速、交互友好的网页导航系统。

以上就是JavaScript实现点击导航链接后自动关闭移动端菜单的详细内容，更多请关注php中文网其它相关文章！