简介

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

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

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

添加以下样式:

src/index.css

* {
  box-sizing: border-box;
}

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

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

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

nano src/App.js

删除logo.svg并将App组件的内容替换为来自示例餐厅的消息:

src/App.js

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是重要的id,稍后将被react-burger-menu引用。

保存更改后,您可以运行 React 应用程序:

npm start 

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

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

第二步——添加侧边栏组件

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

首先,安装react-burger-menu:

npm install react-burger-menu@2.7.1

现在,为新的Sidebar组件创建一个新的Sidebar.js文件:

nano src/Sidebar.js

添加以下代码:

src/边栏.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文档提供的默认样式:

src/边栏.css

/* 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以添加这些自定义样式:

src/边栏.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.css添加到您的Sidebar.js文件中:

src/边栏.js

import React from 'react';
import { slide as Menu } from 'react-burger-menu';
import './Sidebar.css';

// ...

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

nano src/App.js

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

src/App.js

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:

src/边栏.js

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

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

src/边栏.js

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

此代码将导致菜单出现弹性效果。

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

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

结论

在本教程中,您使用react-burger-menu创建了侧边栏菜单。侧边栏菜单是浏览网站的一种常见解决方案。

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

如果您想了解有关 React 的更多信息,请查看我们的如何在 React.js 中编码系列,或查看我们的 React 主题页面以获取练习和编程项目。