如何将我的React汉堡包菜单平齐定位在网站的右上方？

Question

我想建立一个汉堡包菜单，以便在我的React 16.13.0应用程序的移动版上显示。 我正在按照这个教程-- https:/www.zacwillmington.comhow-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上的代码。 如果你有兴趣，这里是GitHub上的代码 -- https:/github.comchicommonsmapstreemasterclient。

Answer 1

你需要做一些小改动

在汉堡包下拉类中，需要添加位置：绝对值和顶部和右侧属性。

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

其次，在Navbar.js组件中，你需要重新排列汉堡和菜单的渲染顺序。

 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>
    );
  }

基于您的github项目创建的工作演示。

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>
);

导航条

现在，你可以导入各个元件了。此外，由于你除了设置了 state 在 constructor 实际上，你可以从构造函数中提取出来，并在类级设置它。当实现新组件时，你可以像其他组件一样调用它们，而不是实例化函数。

_注意： 我也提前更新了你的 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>
        );
    }
}

造型

现在关于你的样式问题。由于父组件的样式，你的内容是在它应该在的地方。你可以调整你的 padding 外围 header 并利用 margin 将您的组件 "推 "到您需要的地方。或者，像 @drew-reese 所述，你可以利用 position (absolute 或 fix，取决于你想要什么）来让图标放到右上方。

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