React汉堡菜单适配：仅在断点显示图标，其余场景展示导航菜单

核心思路 #

通过CSS媒体查询配合React条件渲染实现，两种方案按需选择：纯CSS方案简洁高效，适合基础场景；监听窗口大小方案适合需要动态逻辑的复杂场景。

方案一：纯CSS + React条件渲染（推荐） #

1. 定义断点样式
   默认显示完整导航、隐藏汉堡图标；屏幕小于断点尺寸时，切换显示状态：

/* 默认样式：显示完整导航，隐藏汉堡图标 */
.nav-full {
  display: flex;
}
.hamburger-icon {
  display: none;
}

/* 断点样式：屏幕宽度≤768px时生效 */
@media (max-width: 768px) {
  .nav-full {
    display: none;
  }
  .hamburger-icon {
    display: block;
  }
}

2. React组件应用
   直接在JSX中渲染两个导航模块，靠CSS控制显示隐藏：

import { useState } from 'react';

function Navigation() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <nav>
      {/* 完整导航菜单 */}
      <ul className="nav-full">
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于</a></li>
        <li><a href="/contact">联系</a></li>
      </ul>

      {/* 汉堡图标按钮 */}
      <button 
        className="hamburger-icon"
        onClick={() => setIsMenuOpen(!isMenuOpen)}
        aria-label="打开菜单"
      >
        ☰
      </button>

      {/* 已实现的汉堡菜单内容 */}
      {isMenuOpen && (
        <div className="hamburger-menu">
          <ul>
            <li><a href="/">首页</a></li>
            <li><a href="/about">关于</a></li>
            <li><a href="/contact">联系</a></li>
          </ul>
        </div>
      )}
    </nav>
  );
}

export default Navigation;

方案二：监听窗口大小（适合复杂动态逻辑） #

如果需要在窗口尺寸变化时执行额外操作（比如自动关闭菜单），可以用useEffect监听resize事件：

import { useState, useEffect } from 'react';

function Navigation() {
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  // 监听窗口尺寸变化
  useEffect(() => {
    const handleResize = () => {
      const currentIsMobile = window.innerWidth <= 768;
      setIsMobile(currentIsMobile);
      // 窗口变大时自动关闭汉堡菜单
      if (!currentIsMobile) {
        setIsMenuOpen(false);
      }
    };

    window.addEventListener('resize', handleResize);
    // 清理事件监听，避免内存泄漏
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <nav>
      {/* 非移动端显示完整导航 */}
      {!isMobile && (
        <ul className="nav-full">
          <li><a href="/">首页</a></li>
          <li><a href="/about">关于</a></li>
          <li><a href="/contact">联系</a></li>
        </ul>
      )}

      {/* 移动端显示汉堡图标 */}
      {isMobile && (
        <button 
          className="hamburger-icon"
          onClick={() => setIsMenuOpen(!isMenuOpen)}
          aria-label="打开菜单"
        >
          ☰
        </button>
      )}

      {/* 移动端且菜单打开时显示汉堡内容 */}
      {isMobile && isMenuOpen && (
        <div className="hamburger-menu">
          <ul>
            <li><a href="/">首页</a></li>
            <li><a href="/about">关于</a></li>
            <li><a href="/contact">联系</a></li>
          </ul>
        </div>
      )}
    </nav>
  );
}

export default Navigation;

注意事项 #

• 断点尺寸可根据需求调整（比如max-width: 1024px适配平板）
• 汉堡菜单内容需添加移动端专属样式（如固定定位、背景覆盖等）
• 方案二中的事件监听必须清理，避免内存泄漏

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