html - 如何在 react 中将此下拉菜单组件对齐在我的导航栏上特定位置的下方？

我在 React 中编写简单的导航栏和下拉菜单时遇到问题。我在导航中为一个帐户创建了一个部分，当悬停在该帐户上时，将在其下方立即生成一个下拉菜单。我尝试直接从 w3 站点复制代码，但遇到了更多问题，因此决定采用自己的方法...

我创建了一个由 Navbar 组件呈现的 Dropdown 功能组件。 Dropdown 组件的可见/隐藏状态在名为 hideDropdown 的 useState 变量中进行跟踪。

到目前为止，一切正常。当我试图在导航栏中的帐户部分下方对齐此下拉组件时，我的问题就出现了。无论我尝试什么，我都无法将它放到屏幕上的正确位置。即使我硬编码组件应该从左侧开始的像素数量，调整屏幕大小也会破坏它。默认情况下，Dropdown 组件在左侧生成。此外，只有 left 属性对其位置有任何影响。权利不做任何可观察的事情。此外，百分比似乎并不基于页面的宽度，因为为了将下拉列表一直对齐到右侧，左侧属性必须为 800%。

https://codepen.io/sjh5888/pen/rNaJgya

导航栏.js

import React, { useState, useContext, useEffect } from "react";
import { Redirect } from "react-router-dom";
import jsonwebtoken from "jsonwebtoken";
import Dropdown from "./Modals/Dropdown";
import "./CSS/navbar.css";
import NewPostModal from "./Modals/NewPostModal";
import { CategoryContext } from "./Context/CategoryContext";

function Navbar(props) {
  const { categories, setCategories, user } = useContext(CategoryContext);
  const [modalOpen, updateModal] = useState(false);
  const [hideDropdown, setHideDropdown] = useState(false); //change to true when done
  const [isLoading, setIsLoading] = useState(true);
  const jwtDecoded = jsonwebtoken.decode(localStorage.getItem("jwt"));

  console.log(
    "is token valid? " +
      (jwtDecoded.exp > (Date.now() - (Date.now() % 1000)) / 1000)
  );
  console.log(jwtDecoded);

  if (jwtDecoded.exp > (Date.now() - (Date.now() % 1000)) / 1000) {
    return (
      <div style={{ zIndex: "1", position: "fixed", display: "flex" }}>
        <ul className="navinator">
          <li className="navElement">
            <a className="anchor" href="/home">
              Home
            </a>
          </li>
          <li className="navElement">
            <a className="anchor" href="/profile">
              Profile
            </a>
          </li>
          <li className="active">
            <a
              className="anchor"
              // href="#"
              onClick={e => updateModal(true)}
            >
              + New Post
            </a>
          </li>
          <li style={{ float: "right" }}>
            <div
              id="profile"
              onMouseOver={e => setHideDropdown(false)}
              onMouseLeave={e => setHideDropdown(true)}
            >
              <div style={{ float: "left", paddingRight: "10px" }}>
                <img
                  src={user.profileImage}
                  alt="error"
                  className="profile-image"
                />
                {/* need profileImage field for user */}
              </div>
              <div style={{ float: "left", paddingRight: "5px" }}>
                {jwtDecoded.sub}
              </div>
              <div style={{ float: "left" }} className="arrow-down"></div>
            </div>
          </li>
        </ul>
        <NewPostModal show={modalOpen} updateModal={updateModal} />
        <div style={{float:"right"}}><Dropdown visible={hideDropdown} setHideDropdown={setHideDropdown}/></div>
      </div>
    );
  } else {
    console.log("redirecting");
    return <Redirect to={{ pathname: "/login", state: { from: "/home" } }} />;
  }
} //class

export default Navbar;

下拉.js

import React from "react";
import "../CSS/navbar.css";

export default function Dropdown(props) {
  return (
    <div
      hidden={props.visible}
      className="dropdown"
      onMouseOver={e => props.setHideDropdown(false)}
      onMouseLeave={e => props.setHideDropdown(true)}
    >
      <li>
        <a className="anchor" style={{ textAlign: "left" }} href="/profile">
          Profile
        </a>
      </li>
    </div>
  );
}

导航栏.css

.navinator {
  z-index: 1;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(218, 10, 10);
  position: fixed;
  top: 0;
  width: 100%;
  height: 52px;
}
.navElement {
  float: left;
}
.anchor{
  display: block;
  color: white !important;
  text-align: center;
  padding: 14px 16px; 
  text-decoration: none !important;
  cursor: pointer;
}
.anchor:hover {
  background-color: rgb(255, 23, 15) !important;
}
.active {
  background-color: rgb(28, 13, 110) !important;
  float: right;
  width: 120px;
}
.active .anchor{
  align-items: center;
  justify-content: center;
}
.active .anchor:hover {
  background-color: rgb(32, 11, 156) !important;
}
.profile-image {
  width: 30px;
  height: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
#profile {
  color: white !important;
  text-align: center;
  padding: 14px 16px; 
  text-decoration: none !important;
  /* height: 52px; */
  overflow: auto;
}
#profile:hover {
  background-color: rgb(255, 23, 15) !important;
  cursor: pointer;
}
.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  margin-top: 10px;
}
.dropdown{
  top: 52px;
  width: 222px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  display: inline-block;
  background-color: rgb(218, 10, 10);
}
.dropdown li{
  list-style-type: none;
}

我是网络开发的新手，但我玩得很开心。然而，这有点令人沮丧，因为我觉得它应该是一个非常简单的解决方案。任何帮助将不胜感激!

最佳答案

我想这就是你想要的

I had change some CSS and JS

CSS

.navinator {
  z-index: 1;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: rgb(218, 10, 10);
  position: fixed;
  top: 0;
  width: 100%;
  height: 47px;
}
.navElement {
  float: left;
}
.anchor{
  display: block;
  color: white !important;
  text-align: center;
  padding: 14px 16px; 
  text-decoration: none !important;
  cursor: pointer;
}
.anchor:hover {
  background-color: rgb(255, 23, 15) !important;
}
.active {
  background-color: rgb(28, 13, 110) !important;
  float: right;
  width: 120px;
}
.active .anchor{
  align-items: center;
  justify-content: center;
}
.active .anchor:hover {
  background-color: rgb(32, 11, 156) !important;
}
.profile-image {
  width: 30px;
  height: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
#profile {
  color: white !important;
  text-align: center;
  padding: 11px 16px; 
  text-decoration: none !important;
  /* height: 52px; */
  overflow: auto;
}
#profile:hover {
  background-color: rgb(255, 23, 15) !important;
  cursor: pointer;
}
.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  margin-top: 10px;
}
.dropdown {
  opacity:0;
  visibility: hidden;
    top: 47px;
    width: 222px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    /* display: inline-block; */
    background-color: rgb(6, 6, 6);
    position: absolute;
}
.drop-item:hover .dropdown{
  opacity:1;
  visibility: visible;
  transition: all .3s;
}

.dropdown li{
  list-style-type: none;
}

const Navbar = () => (
  <div style={{ zIndex: "1", position: "fixed", display: "flex" }}>
        <ul className="navinator">
          <li className="navElement">
            <a className="anchor" href="/home">
              Home
            </a>
          </li>
          <li className="navElement">
            <a className="anchor" href="/profile">
              Profile
            </a>
          </li>
          <li className="active">
            <a
              className="anchor"
              // href="#"

            >
              + New Post
            </a>
          </li>
          <li class="drop-item" style={{ float: "right" }}>
            <div
              id="profile"
              >
              <div style={{ float: "left", paddingRight: "10px" }}>
                <img
                  src=""
                  alt="error"
                  className="profile-image"
                />

              </div>
              <div style={{ float: "left", paddingRight: "5px" }}>
                whatever
              </div>
              <div style={{ float: "left" }} className="arrow-down"></div>
            </div>
            <div style={{float:"right"}} className="dropdown">

     <li>
        <a className="anchor" style={{ textAlign: "left" }} href="/profile">
          Profile
        </a>
      </li>
      <li>
        <a className="anchor" style={{ textAlign: "left" }} href="/profile">
          Profile
        </a>
      </li>

    </div>
          </li>
        </ul>

      </div>
)

ReactDOM.render(<Navbar />, document.getElementById('root'))

What i solved is, open drop-down when hover over whatever in nav and set its position below it parent on which it hovered

关于html - 如何在 react 中将此下拉菜单组件对齐在我的导航栏上特定位置的下方？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59638393/

html - 如何在 react 中将此下拉菜单组件对齐在我的导航栏上特定位置的下方？

上一篇：html - "scrollbar-width: none;"在 Firefox 71 中无法在允许滚动的同时隐藏滚动条

下一篇：jquery - 为响应式导航菜单添加向下滑动效果