当前位置：首页 > React

react实现左侧菜单

2026-01-26 17:55:36React

实现左侧菜单的基本结构

使用 React 和 CSS 实现一个简单的左侧菜单，需要创建一个可折叠的侧边栏组件。以下是一个基础实现方案：

代码示例：

import React, { useState } from 'react';
import './Sidebar.css';

const Sidebar = () => {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <div className={`sidebar ${isOpen ? 'open' : 'closed'}`}>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'Close' : 'Open'}
      </button>
      <ul>
        <li>Menu Item 1</li>
        <li>Menu Item 2</li>
        <li>Menu Item 3</li>
      </ul>
    </div>
  );
};

export default Sidebar;

CSS 样式：

.sidebar {
  width: 250px;
  height: 100vh;
  background-color: #f4f4f4;
  transition: width 0.3s ease;
}

.sidebar.closed {
  width: 50px;
}

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

.sidebar li {
  padding: 10px;
  cursor: pointer;
}

.sidebar li:hover {
  background-color: #ddd;
}

使用 React Router 实现导航

如果菜单需要跳转页面，可以结合 react-router-dom 实现路由功能。

代码示例：

react实现左侧菜单

import { Link } from 'react-router-dom';

const Sidebar = () => {
  return (
    <div className="sidebar">
      <ul>
        <li><Link to="/home">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </div>
  );
};

动态生成菜单项

通过数据驱动的方式生成菜单项，便于维护和扩展。

代码示例：

const menuItems = [
  { id: 1, name: 'Home', path: '/home' },
  { id: 2, name: 'About', path: '/about' },
  { id: 3, name: 'Contact', path: '/contact' },
];

const Sidebar = () => {
  return (
    <div className="sidebar">
      <ul>
        {menuItems.map(item => (
          <li key={item.id}>
            <Link to={item.path}>{item.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

添加图标和动画效果

使用图标库（如 react-icons）和 CSS 动画增强用户体验。

react实现左侧菜单

代码示例：

import { FaHome, FaInfoCircle, FaEnvelope } from 'react-icons/fa';

const Sidebar = () => {
  return (
    <div className="sidebar">
      <ul>
        <li><FaHome /> Home</li>
        <li><FaInfoCircle /> About</li>
        <li><FaEnvelope /> Contact</li>
      </ul>
    </div>
  );
};

CSS 动画：

.sidebar li {
  transition: transform 0.2s ease;
}

.sidebar li:hover {
  transform: translateX(5px);
}

响应式设计适配移动端

通过媒体查询调整菜单在小屏幕设备上的显示方式。

CSS 示例：

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: auto;
  }

  .sidebar ul {
    display: flex;
    justify-content: space-around;
  }
}

以上方案涵盖了基础实现、路由集成、动态菜单、图标优化和响应式设计，可根据实际需求调整。