Css 如何将我的React汉堡包菜单放置在网站的右上角？

我想建立一个汉堡包菜单，显示在我的React 16.13.0应用程序的移动版本上。我正在学习这个教程--。所以我创建了导航条组件，如下所示

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;

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

---

编辑：如果您感兴趣，下面是GitHub上的代码--

查看了您的GitHub。你已经有了一个很好的开始，并且肯定朝着一个好的方向前进。也就是说，有几个领域需要一些爱

建筑与建筑 在类组件中有几个功能组件。出于可扩展性和可维护性的目的，我建议提取它们

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

<强>注：您可能需要考虑将特定于组件的内容（<代码> js<代码> >代码> >代码> >代码> >测试.js<代码>等）放到自己的目录中。

汉堡菜单

const汉堡菜单=（）=>(
);

桌面导航

const DesktopNav=（）=>(

添加
搜索

);

MobileMenu

const MobileMenu=（）=>(

添加
搜索

);

导航栏

现在可以导入各个零部件。此外，由于您只需在

构造函数中设置
状态
，因此实际上可以将其从构造函数中取出，并在类级别进行设置。在实现新组件时，您可以像调用任何其他组件一样调用它们，而不是实例化函数

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

import React，{Component}来自'React'；
从'react router dom'导入{NavLink}；
从“反应汉堡菜单”导入汉堡菜单；
从“react device detect”导入{isMobile}；
从“/”导入汉堡菜单；
从“/DesktopNav”导入DesktopNav；
从“/MobileMenu”导入MobileMenu；
导入“/NavBar.css”；
类导航栏扩展组件{
状态={
开：错，
hideOrShowHambugerDropDown:“导航”
}
handleClick=（）=>{
this.setState（{open:！this.state.open}）；
}
render（）{
返回(
{this.state.open？：null}
{isMobile？：}
);
}
}

造型
现在谈谈你关于造型的问题。由于父组件的样式设置，您的内容正好位于它应该位于的位置。您可以调整
标题
外侧的
填充
，并利用
边距
将组件“推”到需要的位置。或者，如前所述，您可以利用
位置
（
绝对
或
修复
，具体取决于您的需要）将图标置于右上角

另外，请记住，引导CSS可能会影响组件的布局。您可能需要在各个组件中覆盖引导设置的样式。
您需要做一些小的更改

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

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

handleSelect=（）=>{
this.setState（{open:false}）；
};
DisplayMobileNu=（）=>{
返回(


添加


搜寻


);
};
render（）{
返回(
{isMobile？this.displayHamburgerManu（）：this.displayNavBar（）}//这是在菜单之前呈现的
{this.state.open？this.displayMobileMenu（）：null}
);
}

看起来像是在菜单后渲染菜单切换，因此如果没有绝对/固定定位，则在菜单打开时，它将在菜单后渲染。是否可以共享一个运行代码沙盒来解决任何进一步的问题，例如您希望菜单切换实际位于何处（右上角）？在屏幕截图中很难分辨，因为它看起来都被放大了。谢谢@DrewReese的分析。我包括了一个GitHub链接，如果这对编辑我的问题有用的话。谢谢。我相信我复制了你的代码，但我仍然看到一些问题。菜单的右边缘和屏幕的右边缘之间似乎有一个间隙--。另外，当我点击一个菜单项时，菜单仍然存在（它不会像预期的那样消失）。@Dave将菜单稍微向右或向左定位只是css。我相信你能做到。我将第二次更新我的答案part@Dave我已经更新了演示，以处理侧隙，并在导航栏菜单栏上选择关闭！这看起来效果不错。我将再进行一些测试，但会回来接受。您好，谢谢您的周到回答。我喜欢将DesktopNav和MobileNav拆分为两个组件的方式，唯一的问题是这稍微增加了可维护性。最终，我想去一个只有一个导航标题和链接列表的地方，而不必在两个地方维护它。
 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>
    );
  }