如何实现移动端导航栏仅在点击图标时显示（默认隐藏）？

Hey there! Let's get that mobile nav bar behaving exactly how you want it—only showing when the menu icon is clicked. Here's what's missing and how to fix it step by step:

The Core Problem #

Your current CSS sets .nav-links to start off-screen with right: -300px, but you haven’t implemented the JavaScript functions to toggle its visibility when the icons are clicked. That’s why it’s either stuck in the wrong state or not responding to clicks at all. Let’s build a robust solution to fix this.

Step 1: Refine Your CSS #

First, update the styles to ensure proper initial hiding, smooth transitions, and mobile/desktop responsiveness:

/* Base mobile nav styles - hidden by default */
.nav-links {
  position: absolute;
  background: beige;
  height: 100vh;
  width: 200px;
  top: 0;
  right: -300px; /* Start fully off-screen */
  text-align: left;
  z-index: 2;
  transition: right 0.3s ease; /* Smooth slide animation */
  padding-top: 60px; /* Make space for the close icon */
}

/* Class to show the navigation bar */
.nav-links.active {
  right: 0; /* Slide into view */
}

.nav-links ul li {
  display: block;
  margin: 15px 0;
  padding-left: 20px; /* Larger touch targets for mobile */
}

.nav-links ul li a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
}

/* Mobile-specific styles: show menu icons */
@media (max-width: 768px) {
  nav .fa-solid {
    display: block;
    color: black;
    margin: 10px;
    font-size: 22px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3; /* Ensure icons stay above the nav bar */
  }

  /* Position close icon inside the nav */
  .nav-links .fa-xmark {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}

/* Desktop styles: hide mobile nav and icons */
@media (min-width: 769px) {
  nav .fa-solid {
    display: none;
  }

  .nav-links {
    position: static;
    height: auto;
    width: auto;
    right: auto;
    padding-top: 0;
  }

  .nav-links ul li {
    display: inline-block;
    margin: 0 10px;
    padding-left: 0;
  }
}

Step 2: Add the JavaScript Toggle Functions #

You need to implement the showMenu() and hideMenu() functions to trigger the visibility change. Add this script right before your closing </body> tag:

<script>
function showMenu() {
  const navLinks = document.getElementById("navLinks");
  navLinks.classList.add("active");
}

function hideMenu() {
  const navLinks = document.getElementById("navLinks");
  navLinks.classList.remove("active");
}
</script>

Quick Pre-Flight Check #

• Make sure you’ve included Font Awesome in your <head> to render the icons correctly:

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  

• Use your browser’s dev tools to inspect the .nav-links element and confirm no other CSS rules are overriding the right property.

This setup will:

• Keep the mobile nav hidden by default
• Slide it smoothly into view when the menu bar icon is clicked
• Slide it back out when the close icon is tapped
• Automatically switch to a desktop-friendly horizontal nav on larger screens

内容的提问来源于stack exchange，提问作者Jeffrey Flores