React：从头开始创建动画侧边导航

React 1年前 79

介绍

在为桌面和移动设备构建的现代 Web 应用程序中，通常使用侧边导航菜单来方便。这些侧边导航菜单可以由用户打开或关闭，从而节省空间并改善体验。

这篇简洁实用的文章向您展示了如何在 React 中从头开始创建动画侧边导航菜单。我们将使用useState钩子、函数式组件和纯 CSS 来创建一个易于使用且看起来很棒的菜单。我们将从头开始构建它。不需要第三方库。

应用概览

我们要使用的演示项目有一个绿色按钮。单击此按钮时，将显示一个深色背景的侧面菜单。它不会突然跳出，而是从屏幕左侧平滑移动，直到完全呈现。在我们的侧边菜单中，有一些虚拟链接和一个关闭按钮。当按下这个按钮时，菜单会温柔地消失在视线之外。

React：从头开始创建动画侧边导航

步骤

通过执行以下命令创建一个新的 React 项目：

npx create-react-app kindacode-side-menu-example

如果需要，您可以更改名称。

将src/App.js中所有自动生成的代码替换为以下内容：

// KindaCode.com
// src/App.js
import { useState } from 'react';
import './App.css';

function App() {
  // Declare a new state variable, which controls the visibility of the side menu
  const [isOpen, setIsOpen] = useState(false);

  // Toggle the side menu
  // This function is triggered when the open button or the close button is clicked
  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      {/* Implement the menu */}
      <div className={`side-nav ${isOpen ? 'side-nav--active' : ''}`}>
        {/* The close button */}
        <button className='close-button' onClick={toggleMenu}>
          &times;
        </button>

        {/* Just some dummy links */}
        <a href='https://www.kindacode.com'>Home</a>
        <a href='/'>About Us</a>
        <a href='/'>Contact Us</a>
        <a href='/'>Privacy Policy</a>
        <div className='divider'></div>
        <a href='/'>Dummy Link</a>
        <a href='https://www.kindacode.com/cat/react/'>React Tutorials</a>
        <a href='/'>Sign Up</a>
      </div>

      {/* Page content */}
      <div className='container'>
        <h2>Welcome to KindaCode.com</h2>
        <p>Example: Closable, animated side drawer navigation</p>

        {/* The open button */}
        <button className='open-button' onClick={toggleMenu}>
          &#9776; open menu
        </button>
      </div>
    </>
  );
}

export default App;

删除src/App.css中的所有内容，然后添加：

/* KindaCode.com */
/* src/App.css */
.container {
  width: 90%;
  margin: 30px auto;
}

/* Style the side menu */
/* By default, the menu is invisible because its left position is set to -100% */
.side-nav {
  position: fixed;
  z-index: 999;
  top: 0;
  left: -100%;
  height: 100%;
  padding: 60px 50px 30px 30px;
  background-color: #333;
  transition: 0.5s;
}

/* This makes the side menu visible */
.side-nav--active {
  left: 0;
}

/* Style the side menu's links */
.side-nav a {
  margin: 8px 0;
  text-decoration: none;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  transition: 0.3s;
}

.side-nav a:hover {
  color: orange;
}

/* A horizontal line to separate sections of the menu */
.divider {
  margin: 15px 0;
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.15);
}

/* Stye the close button */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 60px;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}

.close-button:hover {
  color: orange;
}

/* Style the open menu */
.open-button {
  padding: 8px 18px;
  background: #4caf50;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  border: none;
  outline: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.open-button:hover {
  background: #8bc34a;
}