汉堡菜单点击滑动效果失效，CSS选择器不生效求助

你的汉堡菜单滑动效果失效，主要是三个核心问题导致的，下面逐一给出修复方案：

1. CSS选择器结构错误 #

你写的选择器#ham-icon input[type="checkbox"]:checked + .Hamburger-Menu无法生效，因为<input>是<label id="ham-icon">的子元素，而+是相邻兄弟选择器，只能选中同级的直接相邻元素。这里<input>的同级元素是内部的<span>，不是外部的.Hamburger-Menu。

修复方案：使用:has伪类选择器 #

修改Index.css中的选择器，选中包含已勾选input的label，再选择相邻的汉堡菜单：

#ham-icon:has(input[type="checkbox"]:checked) + .Hamburger-Menu {
    right: 0;
}

注意：:has伪类目前已被Chrome、Firefox（121+）、Edge等主流浏览器支持，如果需要兼容旧版浏览器，可以改用React状态管理（比如用useState控制菜单的类名）。

2. HamburgerMenu组件的className传递错误 #

你的HamburgerMenu组件接收的props参数名写错了，原本应该接收className，但你写成了HamburgerMenu，导致传入的.Hamburger-Menu类名没有被应用到元素上。

修复方案：修正组件的props参数 #

修改HamburgerMenu.jsx：

import { useEffect } from "react"

function HamburgerMenu({ className, ...props }){
    return(
        <div className={className} {...props}>
            <ul>
                <li>Portfolio</li>
                <li>Blog</li>
                <li>About</li>
                <li>Login</li>
                <li>Language: EN</li>
            </ul>
        </div>
    )
}

export default HamburgerMenu

3. 菜单位置切换逻辑不一致 #

你设置菜单初始位置为left: 100vw，选中后又设置right: 0vw，这种混合使用left和right的方式会导致过渡动画异常，甚至不触发。

修复方案：统一使用right属性控制位置 #

修改Index.css中的.Hamburger-Menu样式：

.Hamburger-Menu{
    position: absolute;
    background-color: hsl(0, 0%, 89%);
    top: var(--Header-Height);
    right: -100%; /* 初始隐藏在右侧视窗外 */
    border: 5px solid hsl(0, 0%, 80%);
    border-radius: 5px;
    margin-top: 10px;
    padding: 40px 20px;
    transition: all 0.5s ease-in;
}

#ham-icon:has(input[type="checkbox"]:checked) + .Hamburger-Menu{
    right: 0; /* 选中后滑入视窗 */
}

可选优化：动态更新Header高度 #

原代码中useEffect只在组件挂载时执行一次，如果窗口大小变化导致Header高度改变，菜单的top位置不会自动更新。可以添加窗口resize监听：

// 修改Header.jsx中的useEffect
useEffect(() => {
    const updateHeaderHeight = () => {
        const Header = document.getElementById("top-bar")
        const HeaderRect = Header.getBoundingClientRect()
        setHeaderHeight(HeaderRect.height)
    }

    // 初始化执行一次
    updateHeaderHeight()
    // 监听窗口大小变化
    window.addEventListener('resize', updateHeaderHeight)

    // 组件卸载时移除监听
    return () => window.removeEventListener('resize', updateHeaderHeight)
}, [])

内容的提问来源于stack exchange，提问作者Ahsan914