css - 如何将我的 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和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