react实现汉堡

React 实现汉堡菜单

在 React 中实现汉堡菜单（Hamburger Menu）通常涉及创建一个可点击的图标，用于切换移动设备的导航菜单。以下是实现方法：

安装依赖（如使用图标库）

npm install react-icons  # 或 yarn add react-icons

基础实现代码

import React, { useState } from 'react';
import { FaBars, FaTimes } from 'react-icons/fa';

function HamburgerMenu() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="hamburger-container">
      <button 
        className="hamburger-btn"
        onClick={() => setIsOpen(!isOpen)}
      >
        {isOpen ? <FaTimes /> : <FaBars />}
      </button>

      {isOpen && (
        <nav className="mobile-nav">
          <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
          </ul>
        </nav>
      )}
    </div>
  );
}

CSS 样式建议

.hamburger-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.mobile-nav {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.mobile-nav ul {
  list-style: none;
  padding: 0;
}

.mobile-nav li {
  padding: 10px 20px;
  border-bottom: 1px solid #eee;
}

使用第三方库简化实现

对于更复杂的需求，可以使用专门的反应库如 react-burger-menu：

npm install react-burger-menu

示例代码

import { slide as Menu } from 'react-burger-menu';

function App() {
  return (
    <Menu>
      <a id="home" href="/">Home</a>
      <a id="about" href="/about">About</a>
      <a id="contact" href="/contact">Contact</a>
    </Menu>
  );
}

动画优化技巧

添加过渡动画可提升用户体验：

.mobile-nav {
  transition: transform 0.3s ease-out;
  transform: translateY(-100%);
}

.mobile-nav.open {
  transform: translateY(0);
}

通过状态控制 open 类名的切换即可实现平滑动画效果。