如何让这款JavaScript汉堡菜单正常运行？

Let's walk through the problems with your hamburger menu and get it working smoothly—no obvious mistakes here, just a few missing pieces and small tweaks!

1. DOM Load Order Problem #

If you placed your JS in the <head> without waiting for the DOM to load, your querySelector calls would fail because the .burger and .nav-links elements don't exist yet. Even if you moved it before </body>, wrapping your code in a DOMContentLoaded listener ensures it only runs after the page is fully rendered. Update your JS like this:

document.addEventListener('DOMContentLoaded', () => {
  const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');

    burger.addEventListener('click', () => {
      // Toggle the navigation panel
      nav.classList.toggle('nav-active');

      // Animate menu links to fade in one by one
      navLinks.forEach((link, index) => {
        if (link.style.animation) {
          link.style.animation = '';
        } else {
          link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
        }
      });

      // Animate the burger into an X
      burger.classList.toggle('toggle');
    });
  };

  navSlide();
});

2. Missing CSS Animations #

Your current CSS has no animations for the menu links or the burger icon—let's add those:

Add Link Fade Animation #

Add this to your CSS to make links slide in with a fade:

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

Add Burger Toggle Animation #

Update your .burger styles to include transitions, then add the toggle class styles to turn the burger into an X:

.burger div {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 5px;
  transition: all 0.3s ease; /* Smooth transition for burger lines */
}

/* Transform burger into an X when active */
.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
  opacity: 0;
}
.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

Fix Nav-Active Priority #

Move the .nav-active class inside your media query to avoid needing !important (it'll have higher priority here):

@media screen and (max-width:768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #006a71;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in; /* Explicitly target transform for smooth slide */
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    display: block;
  }

  /* Now .nav-active has proper priority */
  .nav-active {
    transform: translateX(0%);
  }
}

3. Quick Checks for File Issues #

• Double-check your JS file path: If your script is in a folder like js/nav.js, make sure your <script> tag uses the correct relative path (e.g., <script src="js/nav.js"></script>).
• Save all files as UTF-8 format: This avoids weird encoding glitches that can break code.
• Clear your browser cache: Sometimes old cached versions of your JS/CSS can prevent changes from showing up.

Once you make these tweaks, your hamburger menu should slide in, links should fade one by one, and the burger icon should animate into an X when clicked!

内容的提问来源于stack exchange，提问作者wabi-sabi