移动端Hamburger菜单布局异常求助：适配与显示问题排查

核心修改点 #

• 汉堡按钮仅在768px及以下屏幕显示
• 移动端导航链接在汉堡按钮下方以独立容器展示，占满屏幕宽度
• 中等屏幕（769px-1024px）通过缩小字体/减少间距解决拥挤问题

修改后的完整代码 #

HTML

<header>
    <div class="header-container">
        <button class="hamburger">☰</button>
        <nav class="navigation">
            <ul>
                <li class="dropdown">
                    <a href="#" class="dropBtn">Stomping Ground<i class="fa fa-caret-down"></i></a>
                    <div class="dropdown-content">
                        <a href="Intro.html">Intro</a>
                        <a href="Meet.html">Meet the team</a>
                        <a href="Roadmap.html">Roadmap</a>
                    </div>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropBtn">Training<i class="fa fa-caret-down"></i></a>
                    <div class="dropdown-content">
                        <a href="How.html">How to play</a>
                        <a href="Tokenomics.html">Tokenomics</a>
                    </div>
                </li>
                <li><a href="M.html">Multiplayer</a></li>
                <li><a href="S.html">Single player</a></li>
                <li><a href="#"><i class="fab fa-telegram"></i></a></li>
                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                <li><a href="#"><i class="fab fa-discord"></i></a></li>
                <li><button class="btnLogin-popup">Login</button></li>
            </ul>
        </nav>
    </div>
</header>

CSS

/* 全局容器样式 */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* 汉堡按钮默认隐藏 */
.hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 8px 12px;
}

/* 默认导航布局（桌面/中等屏幕） */
.navigation {
    display: flex;
    align-items: center;
}

.navigation ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.navigation li {
    margin-left: 24px;
}

/* 中等屏幕优化（769px-1024px） */
@media (min-width: 769px) and (max-width: 1024px) {
    .navigation li {
        margin-left: 16px;
        font-size: 14px; /* 缩小文字避免拥挤 */
    }
    /* 可选：限制导航容器宽度为50% */
    /* .navigation {
        width: 50%;
        justify-content: center;
    } */
}

/* 移动端布局（≤768px） */
@media (max-width: 768px) {
    .header-container {
        flex-wrap: wrap; /* 导航自动换行到汉堡下方 */
    }
    .hamburger {
        display: block; /* 显示汉堡按钮 */
    }
    .navigation {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
    .navigation ul {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #fff; /* 添加容器背景 */
        box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 增强容器边界感 */
        padding: 12px 0;
        margin-top: 8px;
    }
    .navigation ul.active {
        display: flex;
    }
    .navigation li {
        margin-left: 0;
        width: 100%;
        text-align: left;
        padding: 8px 16px; /* 扩大点击区域 */
    }
    .navigation li:hover {
        background-color: #f5f5f5; /* hover反馈 */
    }
    .dropdown-content {
        position: relative;
        box-shadow: none;
        padding-left: 16px; /* 下拉菜单缩进 */
    }
}

JavaScript（无需修改）

const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.navigation ul');

hamburger.addEventListener('click', () => {
    navMenu.classList.toggle('active')
});

关键说明 #

1. 汉堡按钮显示逻辑：默认隐藏，仅在≤768px屏幕显示，符合移动端专属需求
2. 移动端容器效果：通过给ul添加背景、阴影和内边距，形成独立导航容器，占满屏幕宽度
3. 中等屏幕适配：提供两种优化方案（缩小字体/限制导航宽度），按需选择
4. 交互体验优化：扩大移动端li的点击区域，添加hover反馈提升用户体验

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