求助：如何实现带左侧Logo的响应式导航栏？含700px断点汉堡菜单

Hey there! Let's fix that responsive navbar you've been stuck on. I'll share a clean, working implementation that checks all your boxes—logo left-aligned and a hamburger menu toggle when the screen is 700px or narrower.

First, let's set up the basic markup. We'll include a logo, a hamburger button, and the navigation links:

<nav class="navbar">
  <div class="logo">
    <h2>MyLogo</h2>
  </div>
  <!-- Hamburger toggle -->
  <button class="hamburger" id="hamburger">
    ☰
  </button>
  <!-- Navigation links -->
  <ul class="nav-links" id="navLinks">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Next, we'll style the navbar for desktop first, then adjust for mobile using media queries:

/* Base navbar styles */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #333;
  color: white;
}

.logo h2 {
  margin: 0;
}

/* Desktop navigation links */
.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
  margin: 0;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

/* Hide hamburger by default */
.hamburger {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

Now we'll add the media query for screens ≤700px. We'll hide the full nav links by default, show the hamburger, and style the expanded menu:

@media (max-width: 700px) {
  /* Show hamburger button */
  .hamburger {
    display: block;
  }

  /* Hide nav links by default */
  .nav-links {
    position: absolute;
    top: 60px; /* Match your navbar height */
    right: 0;
    background-color: #333;
    flex-direction: column;
    width: 100%;
    padding: 1rem 0;
    gap: 1rem;
    text-align: center;
    /* Start hidden */
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
  }

  /* Class to show the menu when toggled */
  .nav-links.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
}

Finally, add a tiny bit of JS to toggle the active class when the hamburger is clicked:

const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('navLinks');

hamburger.addEventListener('click', () => {
  navLinks.classList.toggle('active');
});

Key Notes: #

• The navbar uses flexbox for easy alignment—logo stays left-aligned on all screen sizes.
• The hamburger menu slides in smoothly with CSS transitions for a polished look.
• The pointer-events: none on hidden links ensures users can't accidentally click them when the menu is closed.

You can tweak the colors, padding, and transition timings to match your site's design. Let me know if you need help adjusting any part of this!

内容的提问来源于stack exchange，提问作者Jakub Orzeg-Wydra