Optimize mobile navigation: realize the automatic closing function of clicking menu items

This tutorial aims to solve the user experience problem of the mobile navigation menu not automatically closing after clicking any menu item. We will optimize the JavaScript event listening mechanism, bind the click event to the entire navigation menu container, and dynamically switch the display state of the menu with CSS styles, so that the navigation menu can be automatically closed after clicking on a menu item, switch button or menu area, improving the smoothness and intuitiveness of user interaction.

In modern responsive web design, mobile navigation menu usability is crucial. A common user experience pain point is that when the user clicks a link in the expanded mobile navigation menu to jump to a certain area of ​​the page, the menu remains expanded and requires the user to manually click the toggle button to collapse it. This not only increases the user's operation steps, but may also block the page content and affect the browsing experience. This tutorial will provide a simple and efficient solution to intelligently close the navigation menu by adjusting JavaScript event listening and CSS styles.

Analysis of existing problems

Typically, mobile navigation menu expansion and collapse is controlled through a toggle button (such as a hamburger icon). The JavaScript code will listen to the click event of this button, and then add or remove a specific CSS class (such as active) for the navigation menu container to control the display and hiding of the menu.

Here is an example of a typical HTML structure and initial JavaScript code:

HTML structure:

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet">
<nav id="navbar">
    <ul class="menu">
        <li class="logo"><a href="#"><img  src="img/LOGO%20JS%20BLANCO%20PNG.png" alt="Optimize mobile navigation: realize the automatic closing function of clicking menu items" ></a></li>
        <li class="item"><a href="#home">Home</a></li>
        <li class="item"><a href="#about">About</a></li>
        <li class="item"><a href="#portfolio">Portfolio</a></li>
        <li class="item"><a href="#knowledge">Knowledge</a></li>
        <li class="item"><a href="#experience">Experience</a></li>
        <li class="item"><a href="#contact">Contact</a></li>
        <li class="toggle"><a href="#nowhere"><i class="fas fa-bars"></i></a></li>
    </ul>
</nav>

Original JavaScript code (only listens to the toggle button):

 const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");

/* Toggle mobile menu */
function toggleMenu() {
  if (menu.classList.contains("active")) {
    menu.classList.remove("active");
    toggle.querySelector("a").innerHTML = "<i class="'fas" fa-bars></i>";
  } else {
    menu.classList.add("active");
    toggle.querySelector("a").innerHTML = "<i class="'fas" fa-times></i>";
  }
}

/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
// The original code may have other event listeners for item, but usually does not include the logic of closing the menu // for (let item of items) {
// item.addEventListener("keypress", toggleItem, false);
// }

In the above code, the toggleMenu function is responsible for switching the active class of the menu element and updating the icon of the toggle button. However, the line toggle.addEventListener("click", toggleMenu, false); clearly states that the menu will only switch states when the .toggle element (that is, the hamburger icon) is clicked. When the user clicks on the link in .item, the toggleMenu function will not be triggered, causing the menu to fail to close automatically.

Solution: Optimize event monitoring and status management

To solve this problem, the core idea is to associate the closing logic of the menu with the click behavior of the menu item. The most direct and effective method is to extend the event listener from a single toggle button to the entire navigation menu container. The menu's toggle function is triggered when any area within the menu (including the menu item or the toggle button itself) is clicked.

1. JavaScript code optimization

We will modify the JavaScript code to achieve the following goals:

• Move the click event listener from the .toggle element to the entire .menu element.
• Simplify the toggleMenu function and use the classList.toggle method to make the code more concise.
• Dynamically toggle the toggle button's icon to reflect the menu's current state.

Optimized JavaScript code:

 const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");

/* Toggle mobile menu - after optimization*/
function toggleMenu() {
  // Use classList.toggle to simplify the add/remove logic of active classes menu.classList.toggle("active");

  // Get the icon element in the toggle button const icon = toggle.querySelector("a i.fas");

  // Use classList.toggle to simplify icon class switching icon.classList.toggle('fa-bars'); // Switch to the hamburger icon icon.classList.toggle('fa-times'); // Switch to the close icon}

/* Event Listeners - Bind listeners to the entire menu */
menu.addEventListener("click", toggleMenu, false);

Code explanation:

1. menu.classList.toggle("active");: This is a concise replacement for if/else statements. If the menu element contains the active class, it will be removed; if it does not, it will be added.
2. const icon = toggle.querySelector("a i.fas");: The Font Awesome icon element inside the toggle button is precisely selected.
3. icon.classList.toggle('fa-bars'); and icon.classList.toggle('fa-times');: also use the toggle method to synchronously switch icons according to the status of the active class. When the menu is expanded, fa-bars are removed and fa-times are added; when the menu is collapsed, the opposite is true.
4. menu.addEventListener("click", toggleMenu, false);: This is the key change. Now, any click event that occurs inside the .menu element (including clicking on the link in the .item, the .toggle button, or even the .logo) will trigger the toggleMenu function, thereby expanding or collapsing the menu.

2. CSS style coordination

In order for the above JavaScript code to work, we also need to ensure that the CSS style correctly shows or hides the menu items based on whether the menu element has the active class. In mobile view, menu items should be hidden by default and only shown when the menu has active class.

Key CSS styles:

 /* By default, menu items are hidden*/
#navbar .item {
  display: none;
}

/* When the menu is active, display the menu items */
#navbar .menu.active .item {
  display: list-item; /* or block/flex, depending on specific layout requirements*/
}

/* Ensure that the toggle button is always visible on mobile */
#navbar .toggle {
  display: block; /* or flex to ensure display on the mobile end*/
}

/* Adjust other styles as needed, such as displaying all menu items on desktop */
@media (min-width: 768px) { /* Example breakpoint*/
  #navbar .item {
    display: list-item; /* Display all menu items on desktop */
  }
  #navbar .toggle {
    display: none; /* Hide the toggle button on desktop */
  }
}

Style explanation:

• #navbar .item { display: none; }: This line of CSS ensures that all menu items are hidden in the default state (that is, when the menu does not have an active class).
• #navbar .menu.active .item { display: list-item; }: When the .menu element is added with the active class by JavaScript, these menu items will be displayed. list-item is suitable for li elements, and block or flex can also be selected according to the layout.
• Media queries (@media) are used to differentiate between desktop and mobile views, ensuring that menu items are always visible on desktop, while toggle buttons are hidden.

Things to note and best practices

1. Event bubbling and delegation : Binding an event listener to a parent element (.menu) is a form of event delegation. It uses the event bubbling mechanism, that is, events on child elements will bubble up to the parent element. The benefit of this approach is that even if menu items are added dynamically, they automatically inherit this behavior, eliminating the need to add a separate listener for each new menu item.
2. User experience : This design assumes that the user intends to close the menu when clicking anywhere in the menu (including menu items, logos, or toggle buttons). This is reasonable in most mobile navigation scenarios. If there is a special requirement that clicking an element within the menu should not close the menu (for example, an inline search box or a toggle button for a submenu), more refined event judgment is required, such as checking event.target to exclude specific elements.
3. Accessibility : Ensure that toggle buttons have the correct ARIA attributes (such as aria-expanded) to indicate the current state of the menu and allow keyboard users to navigate through the menu via the Tab key and activate the menu with the Enter key.
4. Animation effects : In order to provide a smoother user experience, you can add CSS transition effects to the display/hide of the menu instead of simple display: none/block switching. For example, use max-height or transform properties for animation.
5. Compatibility : The classList API is widely supported in modern browsers. If you need to support IE9 and below browsers, you may need to use the className attribute or Polyfill.

Summarize

By extending the JavaScript event listener from a single toggle button to the entire navigation menu container, and combining it with CSS styles to dynamically control the display of menu items, we successfully implemented the function of the mobile navigation menu automatically closing after clicking any menu item. This approach not only simplifies the code and improves maintainability, but more importantly, significantly improves the navigation experience for mobile users, making its operations more intuitive and efficient. In actual development, developers should further improve accessibility, animation effects and responsive layout based on specific project needs.

The above is the detailed content of Optimize mobile navigation: realize the automatic closing function of clicking menu items. For more information, please follow other related articles on the PHP Chinese website!