React - 如何制作左侧动画菜单

嘿！👋😊

在这篇文章中，我想向您展示我最近创建的左侧动画菜单。

在我们开始之前，我强烈建议您查看我们网站上的解决方案的可运行示例：
React - 如何制作左侧动画菜单

最终效果：

下面我将向您介绍如何创建这个简单的自定义左侧菜单，该菜单在点击事件时显示不同种类的食物🍒🥦🍟的列表。

在这个解决方案中，我使用了一种现代方法，它涉及使用函数式组件和 React Hooks。在这种情况下，useStateHooks 会存储侧边菜单的状态（无论它是否可见）。

示例中还包含一些样式，建议您仔细分析并根据需要进行修改。您也可以修改此处的可运行示例，创建您自己的左侧动画菜单，无需使用任何其他工具。😊

实际示例：

import React from 'react';

const buttonStyle = {
  padding: '10px 20px',
  border: '2px solid #3085d6',
  borderRadius: '5px',
  background: '#3085d6',
  boxShadow: '5px 5px 5px grey',
  textShadow: '1px 1px 1px black',
  fontWeight: '900',
  color: 'white'
};

const commonStyle = {
  position: 'fixed',
  top: 0,
  bottom: 0,
  padding: '5px',
  border: '1px solid #0657FF',
  borderRadius: '0 30px 30px 0',
  background: '#C9E5FF',
  width: '280px',
  transition: '0.5s',
  overflow: 'hidden'
};

const visibleStyle = {
  ...commonStyle,
  left: '0'
};

const hiddenStyle = {
  ...commonStyle,
  left: '-300px'
};

const liStyle = {
  margin: '10px',
  padding: '5px',
  border: '2px solid #3085d6',
  borderRadius: '5px',
  background: '#5fa8ed',
  boxShadow: '5px 5px 5px grey',
  textShadow: '1px 1px 1px black',
  fontWeight: '900',
  color: 'white',
  listStyle: 'circle inside'
};

const App = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <div style={{ height: "200px" }}>
      <button style={buttonStyle} onClick={() => setVisible(true)}>
        Show
      </button>
      <div style={visible ? visibleStyle : hiddenStyle}>
        <button style={buttonStyle} onClick={() => setVisible(false)}>
          Hide
        </button>
        <div>
          <ul>
            <li style={liStyle}>Fruits 🍏🍌🍒</li>
            <li style={liStyle}>Vegetables 🥕🥦🍅</li>
            <li style={liStyle}>Fast Food 🍕🍟🍔</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default App;

您可以在此处运行此示例

留言告诉我你的想法！😊💬

写信给我们！✉

如果您有任何问题需要解决，或者有与 React 或 JavaScript 主题相关的无人能解答的问题，或者您正在寻找指导，请在dirask.com -> 问题上写信给我们

文章来源：https://dev.to/diraskreact/react-how-to-make-left-side-animated-menu-15l6