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

介绍

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

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

应用概览

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

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

步骤

  1. 通过执行以下命令创建一个新的 React 项目:
npx create-react-app kindacode-side-menu-example

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

  1. 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;
  1. 删除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;
}
  1. 运行应用程序:
npm start

最后,访问http://localhost:3000

结论

恭喜!你做到了,一个漂亮的可关闭的动画侧导航。尝试扩展它,改变一些元素,添加一些东西,删除一些东西,修改 CSS 代码,看看接下来会发生什么。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » React:从头开始创建动画侧边导航