如何将我的 React 汉堡菜单齐平放在网站的右上角？

Question

我想构建一个汉堡菜单以显示在我的 React 16.13.0 应用的移动版本上。我正在关注本教程——https://www.zacwillmington.com/how-to-add-a-hamburger-menu-to-your-website/。所以我像这样创建了我的导航栏组件

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import HamburgerMenu from 'react-hamburger-menu';
import {isMobile} from 'react-device-detect';
import './NavBar.css';

class NavBar extends Component {
    constructor(){
        super()
        this.state = {
            open: false,
            hideOrShowHambugerDropDown: 'nav'
        }
    }

    handleClick = () => {
        this.setState({open: !this.state.open});
    }

    displayHamburgerMenu = () => {
        return (
            <HamburgerMenu
                    isOpen={this.state.open}
                    menuClicked={this.handleClick.bind(this)}
                    width={18}
                    height={15}
                    strokeWidth={1}
                    rotate={0}
                    color='black'
                    borderRadius={0}
                    animationDuration={0.5}
                />
        )
    }

    displayNavBar = () => {
        return (
            <ul className='nav'>
                    <li className='nav-link'><NavLink to='/add'>Add</NavLink></li>
                    <li className='nav-link'><NavLink to='/search'>Search</NavLink></li>
                </ul>
        )
    }

    displayMobileMenu = () => {
        return (
            <ul className='hamburgerDropDown'>
                    <li className='nav-link'><NavLink to='/add'>Add</NavLink></li>
                    <li className='nav-link'><NavLink to='/search'>Search</NavLink></li>
                </ul>
        )
    }

    render() {
        return (
            <div className='navbar'>
                { this.state.open ? this.displayMobileMenu() : null}
                {isMobile ? this.displayHamburgerMenu() : this.displayNavBar()}
            </div>
        );
    }
}

export default NavBar;

我正在使用这个样式表来控制它...

.hamburgerDropDown {
  background-color: black;
  border: 1px solid bisque;
}

ul.hamburgerDropDown {
  padding: 10px;
}

.navbar div {
  display: inline-block;
}

但是，我遇到了几个问题。菜单没有出现在我的窗口右上角。此外，关闭“x”按钮出现在菜单下方。如何调整这些项目？如果您使用的是移动浏览器，您可以在 http://prod.chicommons.coop/ 看到演示，否则，请参见下文

编辑：如果你有兴趣，这里是 GitHub 上的代码——https://github.com/chicommons/maps/tree/master/client

Answer 1

你需要做一些小改动

在汉堡包下拉类中，需要添加 position: absolute 和 top and right 属性

.hamburgerDropDown {
  background-color: black;
  border: 1px solid bisque;
  position: absolute;
  top: 50px;
  right: -1rem;
}

其次，在 Navbar.js 组件中，需要对 Hamburger 和 menu 的渲染重新排序

 handleSelect = () => {
    this.setState({ open: false });
  };
  displayMobileMenu = () => {
    return (
      <ul className="hamburgerDropDown" onClick={this.handleSelect}>
        <li className="nav-link">
          <NavLink to="/add">Add</NavLink>
        </li>
        <li className="nav-link">
          <NavLink to="/search">Search</NavLink>
        </li>
      </ul>
    );
  };
render() {
    return (
      <div className="navbar">
        {isMobile ? this.displayHamburgerMenu() : this.displayNavBar()}  // this rendered before menu
        {this.state.open ? this.displayMobileMenu() : null}
      </div>
    );
  }

Working demo created based on your github project

Answer 2

查看了您的 GitHub。你的开端很好，而且肯定朝着一个好的方向前进。也就是说，有一些领域可以使用一些爱。

构建和架构

您的类组件中有几个功能组件。我建议出于可扩展性和可维护性目的提取这些内容。

注意：在进行这些更新时，您可以通过用括号而不是方括号来包装内容来自动返回粗箭头函数。

注意：您可能需要考虑将组件特定内容（.js、.css、.test.js 等）分组到它们自己的目录中。

汉堡菜单

const HamburgerMenu = () => (
    <HamburgerMenu
        isOpen={this.state.open}
        menuClicked={this.handleClick.bind(this)}
        width={18}
        height={15}
        strokeWidth={1}
        rotate={0}
        color='black'
        borderRadius={0}
        animationDuration={0.5}
    />
);

桌面导航

const DesktopNav = () => (
    <ul className='nav'>
        <li className='nav-link'><NavLink to='/add'>Add</NavLink></li>
        <li className='nav-link'><NavLink to='/search'>Search</NavLink></li>
    </ul>
);

移动菜单

const MobileMenu = () => (
    <ul className='hamburgerDropDown'>
        <li className='nav-link'><NavLink to='/add'>Add</NavLink></li>
        <li className='nav-link'><NavLink to='/search'>Search</NavLink></li>
    </ul>
);

导航栏

您现在可以导入各个组件。此外，因为您除了在constructor 中设置state 之外什么都不做，您实际上可以将其从构造函数中拉出并在类级别设置。在实现新组件时，您可以像调用任何其他组件一样调用它们，而不是实例化函数。

_注意：我还继续将您的div 组件更新为更具语义和可访问性的nav 组件。

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import HamburgerMenu from 'react-hamburger-menu';
import {isMobile} from 'react-device-detect';

import HamburgerMenu from './HamburgerMenu';
import DesktopNav from './DesktopNav';
import MobileMenu from './MobileMenu';

import './NavBar.css';

class NavBar extends Component {
    state = {
        open: false,
        hideOrShowHambugerDropDown: 'nav'
    }

    handleClick = () => {
        this.setState({open: !this.state.open});
    }

    render() {
        return (
            <nav className='navbar'>
                { this.state.open ? <MobileMenu /> : null}
                {isMobile ? <HamburgerMenu /> : <DesktopNav />}
            </nav>
        );
    }
}

造型

现在关于样式的问题。由于父组件的样式，您的内容位于应有的位置。您可以在header 周围调整padding，并利用margin 将组件“推”到您需要的地方。或者，正如@drew-reese 提到的，您可以使用position（absolute 或fix，取决于您想要什么）将图标放在右上角。

另外，请记住，Bootstrap CSS 可能会影响组件的布局。您可能需要在各个组件中覆盖 Bootstrap 设置的样式。