下拉菜单响应式

Question

我正在尝试构建一个具有完整宽度和高度的响应式下拉菜单。

问题是，每当我以较小的宽度打开菜单然后展开屏幕时，我原来的导航栏也会显示（即使使用 z-index）。另外，一旦我关闭下拉菜单（即使设置了最大宽度），我的下拉菜单按钮就会不断显示

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars, faCircleXmark } from '@fortawesome/free-solid-svg-icons';
import "./Navbar.css";

function Navbar() {
  
    function showNav() {
        document.getElementById("dropdown").style.display = 'flex';
        document.getElementById("open-btn").style.display = 'none';
        
    }

    function hideNav() {
        document.getElementById("dropdown").style.display = 'none';
        document.getElementById("open-btn").style.display = 'block';
        
    }
    
    return (
        <>
          <header>
            <nav>
                <ul>
                    <li><a href="/#">Home</a></li>
                    <li><a href="/#">About Me</a></li>
                    <li><a href="/#">My Work</a></li>
                    <li><a href="/#">Contact</a></li>
                </ul>
            </nav>
            <button
                onClick={showNav}
                id="open-btn"
                className="nav-btn"
                 >
                <FontAwesomeIcon icon={faBars} style={{color: "#df922e",}}/>
            </button>
            <div id="dropdown">
            <button
                    onClick={hideNav}
                    className="nav-btn nav-close-btn"
                    >
                    <FontAwesomeIcon icon={faCircleXmark} style={{color: "#df922e",}} />
                </button>
                <div id="myDropdown" class="dropdown-content">
                    <a href="#home">Home</a>
                    <a href="#about">About Me</a>
                    <a href="#mywork">My Work</a>
                    <a href="#contact">Contact</a>
                </div>
            </div>
          </header> 
        </>
    );
}

export default Navbar;

header {
        position: fixed;
        background-color: #E0DEDE;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 4rem;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
        animation: 2s cubic-bezier(0.16, 1, 0.3, 1) navAnimate;
  }
  nav ul {
        display: inline-flex;
        justify-content: center;
        gap: 2.5em;
    }
    nav ul li {
        list-style: none;
        font-size: 1.2rem;
        font-weight: 500;
    }
    nav ul li a {
        text-decoration: none;
        color: #351152;
    }
    nav ul li a:hover {
        transition: .1s ease-in-out;
        color: #E09419;
    }
    nav ul li:hover {
        transform: scale(1.3);
        transition: .27s ease-in-out;
    }
    .nav-btn {
        position: fixed;
        top: 1rem;
        right: 2rem;
        cursor: pointer;
        background: transparent;
        border: none;
        font-size: 1.8rem;
    }
    #open-btn {
        display: none;
    }
   .nav-btn:hover {
        transform: scale(1.3);
        transition: .27s ease-in-out;
  }
    #dropdown {
        display: none;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        background-color: #E0DEDE;
        z-index: 1;
  }
    #myDropdown {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rem;
        margin: 8rem auto;
  }
    #myDropdown a {
        font-size: 1.5rem;
        font-weight: 500;
        text-decoration: none;
        color: #351152;
  }
    #myDropdown a:hover {
        transform: scale(1.3);
        transition: .27s ease-in-out;
        color: #E09419;
  }
  @media only screen and (max-width: 900px) {
    header nav {
      display: none;
    }
    #open-btn {
      display: block;
    }
  }
    
  @keyframes navAnimate {
    from {
      transform: translateX(-100vh);
      opacity: 0.1;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
    }

Answer 1

而不是这样做：

function showNav() {
    document.getElementById("dropdown").style.display = 'flex';
    document.getElementById("open-btn").style.display = 'none';
}

function hideNav() {
    document.getElementById("dropdown").style.display = 'none';
    document.getElementById("open-btn").style.display = 'block';
}

您可以使用

useState

在导航处于的两种不同状态之间切换，例如：

const [toggleNav, setToggleNav] = useState(false)

const handleToggleNav = () => {
    setToggleNav(!toggleNav)
}

并根据导航状态设置类别：

<nav className={toggleNav ? hiddenClass : showClass>
    <ul>
       <li><a href="/#">Home</a></li>
       <li><a href="/#">About Me</a></li>
       <li><a href="/#">My Work</a></li>
       <li><a href="/#">Contact</a></li>
    </ul>
</nav>