React应用中CSS类动态切换与响应式菜单实现指南

const [isOpen, setIsOpen] = useState(false);
const menuClassName = isOpen ? "menu open" : "menu";

return (
  <div className={menuClassName}>
    {/* 菜单内容 */}
  </div>
);

const [isOpen, setIsOpen] = useState(false);

return (
  <div className={`menu ${isOpen ? "open" : ""}`}>
    {/* 菜单内容 */}
  </div>
);

/* 汉堡图标动画依赖于checkbox的checked状态 */
#hamburguer:checked ~ label .hamburguer::after {
  transform: rotate(225deg);
  top: 45%;
  background-color: white;
}
#hamburguer:checked ~ label .hamburguer::before {
  transform: rotate(-225deg);
  left: 15%;
  width: 70%;
  top: 45%;
  background-color: white;
}

/* 导航菜单展开依赖于.open类 */
.open {
  transform: translateX(0);
}

// ...
<div className={`navbar ${openMenu}`}> {/* 此处根据hamState控制菜单展开 */}
  {/* ... */}
</div>

<input type="checkbox" id="hamburguer" />
<label htmlFor="hamburguer">
  <div className="hamburguer" onClick={abrirMenu}></div> {/* 此处onClick更新hamState */}
</label>
// ...

import "./header.css";
import { useState } from "react";
// import { useMemo } from "react"; // 对于简单字符串拼接，useMemo并非必需，但对于复杂计算可考虑

function Header() {
  const [hamState, setHamState] = useState(false);

  function toggleMenu() {
    setHamState((prevState) => !prevState);
  }

  // 根据hamState动态生成navbar和hamburguer的类名
  const navbarClasses = `navbar ${hamState ? "open" : ""}`;
  const hamburguerClasses = `hamburguer ${hamState ? "open" : ""}`; // 为汉堡图标添加open类

  return (
    <div>
      <header>
        <div className="menu">
          <div className={navbarClasses}>
            <ul>
              <li>
                <a href="#recuperacao">É difícil ser programador?</a>
              </li>
              <li>
                <a href="#sobre">Se torne um programador</a>
              </li>
              <li>
                <a href="#depoimentos">Veja o que diz quem já fez</a>
              </li>
            </ul>
          </div>

          {/* 移除input[type="checkbox"]和label，直接在hamburguer div上绑定点击事件 */}
          <div className={hamburguerClasses} onClick={toggleMenu}></div>
        </div>
      </header>
    </div>
  );
}

export default Header;

/* ... 其他CSS样式保持不变 ... */

.hamburguer {
  display: none; /* 默认隐藏，媒体查询中显示 */
  width: 70px;
  height: 70px;
  position: fixed;
  top: 20px;
  right: 0;
  cursor: pointer;
  /* 确保在小屏幕下才显示 */
}

.hamburguer::after {
  content: "";
  position: absolute;
  width: 70%;
  height: 10%;
  background-color: rgb(255, 255, 255);
  border-radius: 20px;
  top: 30%;
  left: 15%;
  transition: 1s ease;
}
.hamburguer::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 10%;
  background-color: rgb(255, 255, 255);
  border-radius: 20px;
  top: 50%;
  left: 35%;
  transition: 1s ease;
}

/* 汉堡图标展开时的动画效果 */
.hamburguer.open::after { /* 目标改为 .hamburguer.open */
  transform: rotate(225deg);
  top: 45%;
  background-color: white;
}
.hamburguer.open::before { /* 目标改为 .hamburguer.open */
  transform: rotate(-225deg);
  left: 15%;
  width: 70%;
  top: 45%;
  background-color: white;
}

@media screen and (max-width: 1080px) {
  /* ... 媒体查询中的其他样式 ... */
  .navbar ul {
    position: fixed;
    top: 100px;
    right: 0;
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: red;
    transition: transform 0.6s ease-in;
    transform: translateX(100%);
  }
  .open { /* 这个 .open 类应用于 .navbar */
    transform: translateX(0);
  }
  .navbar ul li {
    padding: 15px 0;
  }
  .navbar ul li a {
    color: white;
    transition: 0.3s ease-in;
  }
  .navbar ul li a:hover {
    color: white;
  }
  .hamburguer {
    display: inline-block; /* 在小屏幕下显示汉堡图标 */
  }
}

let openMenu = useMemo(() => {
    return hamState ? "open" : ""
  }, [hamState])