JavaScript implements automatic closing of responsive navigation menu

This article will guide you on how to implement the function of automatically closing the menu after clicking an internal link in a responsive navigation menu. By adding a unified event listener to the navigation item, when the user selects any navigation link, the system will remove the display style of the menu, thus improving the user experience and avoiding the problem of the menu blocking content or needing to be closed manually.

Introduction: Optimizing the user experience of responsive navigation menus

In modern web design, responsive navigation menus (often presented as a "hamburger" icon) are an indispensable component on mobile devices. It allows users to access complete navigation options within limited screen space. However, a common user experience problem is that after a user clicks a link in the menu and navigates to a specified area of ​​the page, the menu remains open, blocking the page content and requiring the user to close it manually. This article will introduce in detail how to elegantly solve this problem through JavaScript and realize the automatic closing of the menu after clicking the navigation link.

Analysis of existing menu structure and functions

To better understand the problem and solution, let's first review the implementation of a typical responsive navigation menu.

HTML structure: A menu usually consists of a trigger button (such as a hamburger icon) and a list containing navigation links.

 <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 style: Control the initial hidden state of the menu through CSS and define a .show class to make it visible.

 .list {
    list-style-type: none;
    display: none; /* hidden by default */
}
.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;
}
/* Other related styles, such as .hamburger */
.hamburger {
    width: 50px;
    height: 50px;
    background-color: red;
    cursor: pointer;
    position: absolute;
    z-index: 999;
}

JavaScript logic: A simple JavaScript snippet is used to listen to the click event of the hamburger button to switch the show class of the navigation list.

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

button.addEventListener("click", () => {
    list.classList.toggle('show'); // Toggle menu display/hide});

Core problem: The menu does not close automatically after clicking the navigation link

In the above setup, when the user clicks on the hamburger button, the navigation menu expands (show class added). However, once the user clicks on any navigation link in the menu (such as HOME or ABOUT), the page scrolls to the corresponding anchor, but the menu itself remains open. Not only does this take up screen space, it may also prevent users from seeing the intended content, affecting the overall user experience.

Solution: Add a close event listener for navigation links

In order to solve this problem, we need to actively trigger the closing operation of the menu when the user clicks the navigation link.

Step 1: Optimize the HTML structure and add unified identification to navigation links

First, add a shared class name, such as nav-item, to all navigation link elements. This allows us to easily select all these links via JavaScript.

• HOME
• SERVICES
• ABOUT
• MENU

Step 2: Write JavaScript logic to monitor link click events

Next, modify the JavaScript code. Outside of the hamburger button's event listener, we need:

1. Get all navigation links with nav-item class.
2. Iterate through the links and add a click event listener for each link.
3. In each link's click event handler, remove the show class on the navigation list list.

 const button = document.getElementById("hamburger");
const list = document.getElementById("list"); // Make sure the list element has obtained button.addEventListener("click", () => {
    list.classList.toggle('show');
});

// Get all navigation links const navItems = document.querySelectorAll('.nav-item');

// Add click event listener for each navigation link navItems.forEach((navItem) => {
    navItem.addEventListener('click', () => {
        list.classList.remove("show"); // Remove the 'show' class and close the menu});
});

Through the above modifications, when the user clicks on any navigation link, the show class on the list element will be removed immediately, thereby realizing the automatic closing of the menu. At the same time, the browser will handle the default behavior of the tag, making the page scroll smoothly to the corresponding anchor point.

Complete sample code

Here is the HTML and JavaScript snippet with all the modifications integrated, leaving the CSS unchanged:

<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>
    const button = document.getElementById("hamburger");
    const list = document.getElementById("list");

    // Hamburger button click event: switch menu display/hide button.addEventListener("click", () => {
        list.classList.toggle(&#39;show&#39;);
    });

    // Get all navigation links const navItems = document.querySelectorAll(&#39;.nav-item&#39;);

    //Add click event for each navigation link: close menu</script>

The above is the detailed content of JavaScript implements automatic closing of responsive navigation menu. For more information, please follow other related articles on the PHP Chinese website!