复选框选中时CSS菜单无动画效果的问题排查

点击“Hamburger”按钮后，经过样式处理的Flex菜单应从屏幕底部向上滑出。当前存在WordPress强加的样式，同时为适配不同屏幕尺寸做了额外样式设置，因此选择为li元素使用Flexbox布局。参考了网上可运行的示例结构，但实现后菜单无动画效果，确定是某个明显疏漏导致，已有多年未深入实操Web开发。

对应的PHP/HTML代码 #

<div class="e-nav">

<nav id="site-navigation" class="main-navigation">

<header id="menu-box" class="menu-drawer">

<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
    
    <?php
    wp_nav_menu( array(
        'theme_location' => 'menu-1',
        'menu_id'        => 'primary-menu',
    ) );
    ?>

</header>

</nav><!-- #site-navigation -->

输出的HTML结构 #

<nav id="site-navigation" class="main-navigation">

            <header id="menu-box" class="menu-drawer">

                <input class="menu-btn" type="checkbox" id="menu-btn"/>
                <label class="menu-icon" for="menu-btn">
                    <span class="navicon"></span>
                </label>

                <div class="menu-menu-1-container">
                    <ul id="primary-menu" class="menu">
                        <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33">
                            <a href="https://example.com/staging/5544/sample-page/">Archive</a>
                        </li>
                        <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32">
                            <a href="https://example.com/staging/5544/sample-page/">Projects</a>
                        </li>
                        <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
                            <a href="https://example.com/staging/5544/sample-page/">Video</a>
                        </li>
                        <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">
                            <a href="https://example.com/staging/5544/shop/">Shop</a>
                        </li>
                        <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">
                            <a href="https://example.com/staging/5544/sample-page/">Follow</a>
                        </li>
                        <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31">
                            <a href="https://example.com/staging/5544/sample-page/">Colophon</a>
                        </li>
                        <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-21">
                            <a href="https://example.com/staging/5544/">foo</a>
                        </li>
                    </ul>
                </div>
            </header>

        </nav>
        <!-- #site-navigation -->

    </div>

CSS代码 #

#e-page {
grid-template-columns: auto 100% auto;
}

.e-header {
grid-area: 1 / 1 / span 1 / span 3;
}

.e-content {
grid-area: 3 / 1 / span 1 / span 3;
}

.e-footer {
grid-area: 4 / 1 / span 1 / span 3;
}

.e-nav {
position: fixed;
left: 0;    
bottom: 0;
}

nav ul {
flex-wrap: wrap;
justify-content: left;
} 

nav li {
flex-basis: 50%;
}

nav li:nth-child(7) {
flex-basis: 100%;
}

.menu {
max-height: 12em;
transition: max-height .2s ease-out;
}

.menu-drawer .menu-icon {
cursor: pointer;
display: inline-block;
height: 3em;
width: 3em;
right: 0;
bottom: 0;
padding: 1em;
position: fixed;
user-select: none;
z-index: 3;
}

.menu-drawer .menu-icon .navicon {
background: #FFF;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 1em;
}

.menu-drawer .menu-icon .navicon:before {
background: #FFF;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}

.menu-drawer .menu-icon .navicon:before {
top: 1em;
}

.menu-drawer .menu-btn {
display: none;
}

.menu-drawer .menu-btn:checked ~ .menu {
max-height: 3em;
border: 1px solid red;
}

.menu-drawer .menu-btn:checked ~ .menu-icon .navicon {
transform: rotate(-45deg);
top: .5em;
}

.menu-drawer .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(90deg);
}

.menu-drawer .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
top: 0;
}

问题排查与修复 #

核心问题 #

1. 兄弟选择器失效：输出的HTML中，.menu被WordPress自动包裹在div.menu-menu-1-container里，并非.menu-btn的直接兄弟，导致menu-btn:checked ~ .menu规则完全不生效。
2. 初始状态错误：菜单默认max-height:12em是展开状态，不符合“从底部滑出”的需求，应该初始隐藏。
3. 缺少溢出控制：未设置overflow:hidden，即使max-height为0，内容仍可能显示。

修复后的关键CSS代码 #

/* 调整菜单容器的初始状态与定位 */
.menu-menu-1-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #333; /* 替换为你需要的背景色 */
}

/* 复选框选中时展开菜单 */
.menu-drawer .menu-btn:checked ~ .menu-menu-1-container {
    max-height: 20em; /* 根据菜单项数量调整高度，确保容纳所有内容 */
}

/* 修正.menu的基础样式 */
.menu {
    flex-wrap: wrap;
    justify-content: left;
    margin: 0;
    padding: 1em;
    list-style: none;
}

/* 确保汉堡图标层级高于菜单 */
.menu-drawer .menu-icon {
    z-index: 10;
}

补充说明 #

• 必须针对WordPress生成的menu-menu-1-container容器做过渡动画，而不是内部的.menu。
• 调整max-height的数值要足够覆盖所有菜单项的总高度，避免内容被截断。
• 可以根据需求修改过渡时长（0.3s），让动画更自然。

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