介绍

侧边栏菜单是一种出现在网页侧面的导航形式。这些菜单提供对网站不同部分的访问，同时不干扰页面上的内容。

按钮经常用于切换侧边栏菜单的打开和关闭。这些按钮往往有一个由三个水平线组成的图标来代表一个菜单。由于此图标的形状，它通常被称为“汉堡包”菜单图标。两条外线形成“面包”，中间线形成“馅饼”。

react-burger-menu是一个允许您为 React 应用程序创建侧边栏的库。它还带有多种效果和样式，用于自定义菜单的外观和感觉。

在本教程中，您将为react-burger-menu一个提供沙拉、比萨饼和甜点的名义餐厅网站使用和构建侧边栏。

先决条件

要完成本教程，您需要：

• Node.js 的本地开发环境。遵循如何安装 Node.js 并创建本地开发环境。

本教程已通过 Node v14.7.0、npmv6.14.7、reactv16.13.1 和react-burger-menuv2.7.1 验证。

步骤 1 — 设置项目

从使用create-react-app生成一个 React App 开始，然后安装依赖项：

npx create-react-app react-burger-menu-example

切换到新的项目目录：

cd react-burger-menu-example

接下来，打开index.css：

nano src/index.css

添加以下样式：

* {
  box-sizing: border-box;
}

#page-wrap {
  padding-bottom: 10px;
  padding-top: 10px;
}

此代码将box-sizing属性设置border-box为解决 CSS 盒模型计算问题。此代码还建立了一些垂直填充以防止边距折叠。

将更改保存到index.css然后打开App.js：

nano src/App.js

删除logo.svg并用App示例餐厅的消息替换组件的内容：

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App" id="outer-container">
      <div id="page-wrap">
        <h1>Cool Restaurant</h1>
        <h2>Check out our offerings in the sidebar!</h2>
      </div>
    </div>
  );
}

export default App;

outer-container和page-wrap是重要的ids，稍后将被引用react-burger-menu。

保存更改后，您可以运行 React 应用程序：

npm start 

修复项目的任何错误或问题，然后localhost:3000在 Web 浏览器中打开：

一旦您正确显示了Cool Restaurant消息，您就可以开始构建侧边栏。

第 2 步 – 添加侧边栏组件

您的侧边栏将需要react-burger-menu一个 React 组件。

首先，安装react-burger-menu：

npm install react-burger-menu@2.7.1

现在，Sidebar.js为新Sidebar组件创建一个新文件：

nano src/Sidebar.js

添加以下代码：

import React from 'react';
import { slide as Menu } from 'react-burger-menu';

export default props => {
  return (
    <Menu>
      <a className="menu-item" href="/">
        Home
      </a>
      <a className="menu-item" href="/salads">
        Salads
      </a>
      <a className="menu-item" href="/pizzas">
        Pizzas
      </a>
      <a className="menu-item" href="/desserts">
        Desserts
      </a>
    </Menu>
  );
};

此代码将生成一个Sidebar与菜单链接Home，Salads，Pizzas，和Desserts。

本教程不会为这些项目创建单独的路由。相反，它将专注于Sidebar自身的功能。

react-burger-menu将要求您提供一些样式，因此创建一个Sidebar.css文件：

nano src/Sidebar.css

添加react-burger-menu文档提供的默认样式：

/* Position and sizing of burger button */
.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
}

/* Color/shape of burger icon bars */
.bm-burger-bars {
  background: #373a47;
}

/* Color/shape of burger icon bars on hover*/
.bm-burger-bars-hover {
  background: #a90000;
}

/* Position and sizing of clickable cross button */
.bm-cross-button {
  height: 24px;
  width: 24px;
}

/* Color/shape of close button cross */
.bm-cross {
  background: #bdc3c7;
}

/*
Sidebar wrapper styles
Note: Beware of modifying this element as it can break the animations - you should not need to touch it in most cases
*/
.bm-menu-wrap {
  position: fixed;
  height: 100%;
}

/* General sidebar styles */
.bm-menu {
  background: #373a47;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
}

/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
  fill: #373a47;
}

/* Wrapper for item list */
.bm-item-list {
  color: #b8b7ad;
  padding: 0.8em;
}

/* Individual item */
.bm-item {
  display: inline-block;
}

/* Styling of overlay */
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}

对于您的教程，您需要应用链接颜色和悬停颜色。修改Sidebar.css以添加这些自定义样式：

/* Individual item */
.bm-item {
  display: inline-block;

  color: #d1d1d1;
  margin-bottom: 10px;
  text-align: left;
  text-decoration: none;
  transition: color 0.2s;
}

.bm-item:hover {
  color: #ffffff;
}

最后，要Sidebar在您的应用程序中使用 ，您需要重新访问App.js：

nano src/App.js

导入Sidebar组件并将其添加到您的App组件中：

import React from 'react';
import Sidebar from './Sidebar';
import './App.css';

function App() {
  return (
    <div className="App" id="outer-container">
      <Sidebar pageWrapId={'page-wrap'} outerContainerId={'outer-container'} />
      <div id="page-wrap">
        <h1>Cool Restaurant</h1>
        <h2>Check out our offerings in the sidebar!</h2>
      </div>
    </div>
  );
}

export default App;

此时，您可以再次运行您的应用程序：

npm start

修复项目的任何错误或问题。并localhost:3000在网络浏览器中访问：

现在，如果你点击“汉堡包”菜单图标，你的工具栏菜单中会出现链接Home，Salads，Pizzas，和Desserts：

接下来，您可以探索一些可用于react-burger-menu.

第 3 步 – 添加高级动画

现在，您的侧边栏使用slide动画。react-burger-menu带有十种动画可能性。

要尝试另一个动画，请打开Sidebar.js：

nano src/Sidebar.js

并替换slide为不同的动画：

// ...
import { bubble as Menu } from 'react-burger-menu';
// ...

此代码将导致菜单出现气泡效果。

// ...
import { elastic as Menu } from 'react-burger-menu';
// ...

此代码将使菜单显示为具有弹性效果。

完整的动画列表可以在react-burger-menu文档中找到。

该文档还具有高级自定义功能，可让侧边栏菜单适合您的应用程序。

结论

在本教程中，您曾经react-burger-menu创建过侧边栏菜单。侧边栏菜单是导航网站的一种常见解决方案。

存在侧边栏菜单的替代库，您可能会找到更适合您的应用程序的库。

如果您想了解有关 React 的更多信息，请查看我们的How To Code in React.js系列，或查看我们的 React 主题页面以获取练习和编程项目。