如何使用React构建底部侧边菜单？新手开发实现相关问题咨询

一、菜单类型判定 #

你提到的两个名词属于不同维度的分类：

• *Hamburger菜单（汉堡菜单）*是按照触发形式归类的，你要实现的点击按钮弹出侧边栏的形式就属于汉堡菜单；
• non-modal菜单是按照交互模态归类的，指菜单打开时不会阻断页面其他区域的操作，对应的是modal菜单（打开时会显示半透明蒙层，仅支持操作菜单区域，点击蒙层自动关闭）。
  常规作业需求里的侧边汉堡菜单默认做成modal类型即可，如有特殊要求也可以去掉蒙层调整为non-modal模式。

二、新手友好实现步骤 #

不需要引入额外复杂UI库，用原生React状态就能实现，步骤如下：

• 第一步：定义状态控制菜单显隐
  用useState定义布尔状态控制菜单开关，示例代码：

  import { useState } from 'react';
  import './SideMenu.css';
  
  function SideMenu() {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    // 切换菜单开/关
    const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
    // 关闭菜单
    const closeMenu = () => setIsMenuOpen(false);
  

• 第二步：编写组件结构
  包含汉堡触发按钮、蒙层、侧边菜单内容三个部分，接上面组件的return部分：

  return (
      <div className="side-menu-container">
        {/* 汉堡触发按钮 */}
        <button className="hamburger-btn" onClick={toggleMenu}>
          <span></span>
          <span></span>
          <span></span>
        </button>
  
        {/* 蒙层，菜单打开时才渲染 */}
        {isMenuOpen && <div className="menu-overlay" onClick={closeMenu}></div>}
  
        {/* 侧边菜单主体，通过类名控制滑入滑出动画 */}
        <div className={`menu-content ${isMenuOpen ? 'open' : ''}`}>
          <button className="close-btn" onClick={closeMenu}>×</button>
          <nav>
            <ul>
              <li onClick={closeMenu}>首页</li>
              <li onClick={closeMenu}>作业列表</li>
              <li onClick={closeMenu}>个人中心</li>
              {/* 可自行补充其他菜单项 */}
            </ul>
          </nav>
        </div>
      </div>
    );
  }
  
  export default SideMenu;
  

• 第三步：编写CSS样式实现动效
  新建SideMenu.css文件，内容参考如下，可根据作业设计调整配色和尺寸：

  /* 汉堡按钮样式 */
  .hamburger-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001;
    background: none;
    border: none;
    cursor: pointer;
  }
  .hamburger-btn span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;
    background: #333;
    transition: 0.3s;
  }
  
  /* 蒙层样式 */
  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }
  
  /* 菜单内容样式 */
  .menu-content {
    position: fixed;
    top: 0;
    left: -300px; /* 默认隐藏在左侧视窗外 */
    width: 300px;
    height: 100vh;
    background: #fff;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: left 0.3s ease;
    padding: 20px;
  }
  .menu-content.open {
    left: 0; /* 打开时滑入视窗 */
  }
  .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .menu-content ul {
    list-style: none;
    padding: 0;
    margin-top: 60px;
  }
  .menu-content li {
    padding: 12px 0;
    cursor: pointer;
    border-bottom: 1px solid #eee;
  }
  .menu-content li:hover {
    color: #1677ff;
  }
  

• 第四步：在业务页面引入使用

  import SideMenu from './SideMenu';
  
  function App() {
    return (
      <div className="App">
        <SideMenu />
        {/* 你的其他页面内容 */}
      </div>
    );
  }
  

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