如何实现电子杂志顶部标签在窗口缩小时转为下拉菜单（仿IGN）

Got it, let's build that responsive navigation you want—switching from horizontal tabs to a dropdown menu when the browser is resized to half/quarter screen size. Here's a complete, no-external-library solution using plain HTML, CSS, and JavaScript:

Step 1: Refactor Your HTML (Semantic & Responsive-Friendly) #

First, we'll replace your existing <h5> structure with a proper semantic <nav> element, plus a hamburger menu toggle for small screens:

<nav class="main-nav">
  <!-- Hamburger menu button (only visible on small screens) -->
  <button class="menu-toggle" id="menuToggle">☰</button>
  
  <!-- Navigation menu container -->
  <div class="nav-menu" id="navMenu">
    <a href="index.html">Home</a>
    <a href="reviews.html">Reviews</a>
    <a href="interviews.html">Interviews</a>
    <a href="apply.html">Apply</a>
    <a href="login register.html">Login / Sign Up</a>
  </div>
</nav>

Step 2: Add CSS for Responsive Layout #

This CSS will handle the horizontal layout on desktop, and switch to a hidden dropdown menu on small screens. We'll use media queries to trigger the layout change:

/* Desktop default styles */
.main-nav {
  display: flex;
  align-items: center;
  background-color: #1a1a1a; /* IGN-style dark background (customize as needed) */
  padding: 12px 24px;
  position: relative; /* Needed for absolute positioning of mobile menu */
}

.nav-menu {
  display: flex;
  gap: 32px; /* Replaces your    for consistent spacing */
  margin-left: auto; /* Optional: pushes menu to the right */
}

.nav-menu a {
  color: #ffffff;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-menu a:hover {
  color: #ff6b00; /* IGN's signature orange highlight (customize) */
}

/* Hide hamburger button by default */
.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 26px;
  cursor: pointer;
}

/* Responsive styles for screens 768px and smaller (adjust breakpoint as needed) */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #1a1a1a;
    flex-direction: column;
    padding: 20px 24px;
    gap: 18px;
    display: none; /* Hide menu by default on mobile */
  }

  /* Show menu when "active" class is added */
  .nav-menu.active {
    display: flex;
  }
}

Step 3: Add JavaScript for Menu Toggle #

This tiny script will let users click the hamburger button to show/hide the mobile menu:

// Grab elements from the DOM
const menuToggle = document.getElementById('menuToggle');
const navMenu = document.getElementById('navMenu');

// Toggle menu visibility on button click
menuToggle.addEventListener('click', () => {
  navMenu.classList.toggle('active');
});

Customization Tips #

• Breakpoint: Adjust the max-width in the media query (e.g., 600px instead of 768px) to control when the layout switches.
• Styling: Change background-color, color, and font-family to match your e-magazine's brand.
• Animation: Add a smooth slide-down effect by replacing display: none/flex with opacity and height transitions—just let me know if you want help refining that!

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