将网络导航切换到汉堡菜单

Question

我正在构建我的第一个 React 网站并希望实现移动支持。所以我要做的第一件事是，当 window 拉得更小时，导航应该更改为汉堡菜单。喜欢 this site

有人知道如何做到这一点吗？谢谢。

Answer 1

您可以ui从头开始创建一个。取决于您要实现的目标。如果您不熟悉反应，我可能会遵循各种教程。 UDemy 有大量课程，如果您在私人模式下使用浏览器，您应该获得 10 美元的课程，内容超过 30 小时。 Lynda/Linkedin学习也是如此

此人有一个交互式库，您可以将其安装到您的项目中。 npm 安装 react-burger-menu ... https://negomi.github.io/react-burger-menu/

我喜欢使用 MaterialUI 创建简单实用的组件，这些组件开箱即用。他们似乎没有汉堡选项，但他们确实有其他几个您可能会觉得有趣的选项。那将是 npm install @material-ui/core... https://react.semantic-ui.com/collections/menu/#types-basic

我过去使用的另一种是语义 UI。他们也有很多选择。与 MaterialUI 类似，据我所知，他们没有汉堡选项，但他们确实有其他几个选项。 npm 安装语义-ui-反应... https://react.semantic-ui.com/collections/menu/#types-basic

以上所有选项都有一个交互式网站，可以帮助您使用这些组件。这有点作弊，但是当你在开发健壮的网络应用程序时，它可以节省大量时间。您还可以 google 使用 bootstrap 或仅使用香草 css.

的汉堡菜单示例

Answer 2

我在这里分享我的解决方案：

首次安装：

npm 安装 react-burger-menu --save

我的 buergermenu.js 看起来像：

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

class burger extends React.Component {
    showSettings (event) {
        event.preventDefault();

      }

  render () {
    // NOTE: You also need to provide styles, see https://github.com/negomi/react-burger-menu#styling
    return (

      <Menu right width={ '100%' } disableAutoFocus >
        <a id="home" className="menu-item" href="/">Home</a>
        <a id="about" className="menu-item" href="/about">About</a>
        <a id="contribute" className="menu-item" href="/contribute">Contribute</a>
        <a id="download" className="menu-item" href="/download">Download</a>
      </Menu>
    );
  }
}
export default burger

buergermenu.css:

/* Position and sizing of burger button */
.bm-burger-button {
    position: fixed;
    width: 36px;
    height: 30px;
    right: 36px;
    top: 36px;
  }
  
  /* Color/shape of burger icon bars */
  .bm-burger-bars {
    background: white;
  }
  
  /* Color/shape of burger icon bars on hover*/
  .bm-burger-bars-hover {
    background: #a94400;
  }
  
  /* Position and sizing of clickable cross button */
  .bm-cross-button {
    width: 36px;
    height: 36px;
    right: 36px;
    top: 36px;
  }
  
  /* Color/shape of close button cross */
  .bm-cross {
    background: white;
  
    
  }
  
  /*
  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: rgba(255,127,36, 0.7);
    padding: 2.4em 2.5em 0;
    font-size: 1.8em;
  }
  
  /* Morph shape necessary with bubble or elastic */
  .bm-morph-shape {
    fill: #373a47;
  }
  
  /* Wrapper for item list */
  .bm-item-list {
    color: #b8b7ad;
    
  }
  
  /* Individual item */
  .bm-item {
    display: inline-block;
  }
  
  /* Styling of overlay */
  .bm-overlay {
    background: rgba(0, 0, 0, 0.3);
  }

  .menu-item {
    text-decoration: none;
    color: white;
    font-weight: bold;
    line-height: 2;
  }

@media (min-width: 1000px) {
    .bm-burger-bars {
    display: none !important;
    }
  }

App.js:

import Burger from './burgermenu'

<header>
          
         <Burger />
</header>

也许它对其他东西有用。

将网络导航切换到汉堡菜单

React web navigation switch to Burger Menu

menu

web

reactjs