个人作品集网站移动端Hamburger菜单功能实现问题求助

问题排查 #

你的代码存在以下关键错误导致菜单点击后无响应：

1. HTML类名缺失：导航列表<ul>未添加nav-links类，CSS中.nav-links选择器无法匹配目标元素
2. 汉堡图标无样式：仅添加了.menu-toggle容器，但未给.hamburger设置视觉样式，用户看不到可点击的按钮
3. 社交图标未关联菜单状态：移动端默认隐藏社交图标，但未设置菜单打开时的显示逻辑
4. 响应式布局冲突：原nav的justify-content: space-around在移动端会导致元素排列混乱

修正后的完整代码 #

1. 导航栏HTML（修正版） #

<header>
    <nav>
        <div class="logo">
            <span><a href="#home">Aditya.</a></span>
        </div>
        <div class="menu-toggle">
            <div class="hamburger"></div>
        </div>
        <!-- 添加nav-links类，让CSS能选中 -->
        <ul class="nav-links">
            <li><a href="#about">About</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#skills">Skills</a></li>
            <li><a href="#contact">Contact</a></li>
            <!-- 移动端菜单内嵌社交图标 -->
            <li class="mobile-social">
                <a href="https://github.com/aditya9-2" target="_blank"> <img src="assets/github.png" alt="github" width="25" height="25"></a>
                <a href="https://linkedin.com/in/aadityabasak20" target="_blank"> <img src="assets/LinkedIn.png" alt="LinkedIn" width="25" height="25"></a>
                <a href="https://x.com/aadityaa027?t=QolEyjPnS_MgghSikQeP0g&s=08" target="_blank"> <img src="assets/x.png" alt="x" width="25" height="25"></a>
            </li>
        </ul>
        <!-- 桌面端保留独立社交栏 -->
        <div class="social">
            <a href="https://github.com/aditya9-2" target="_blank"> <img src="assets/github.png" alt="github" width="25" height="25"></a>
            <a href="https://linkedin.com/in/aadityabasak20" target="_blank"> <img src="assets/LinkedIn.png" alt="LinkedIn" width="25" height="25"></a>
            <a href="https://x.com/aadityaa027?t=QolEyjPnS_MgghSikQeP0g&s=08" target="_blank"> <img src="assets/x.png" alt="x" width="25" height="25"></a>
        </div>
    </nav>
</header>

2. 完整CSS（修正版） #

/* 假设已定义全局变量：--background, --text-color, --text-hover */
header {
    position: sticky;
    top: 0;
    z-index: 11;
    background: var(--background);
}
nav {
    display: flex;
    justify-content: space-between; /* 调整布局，让logo和汉堡菜单分置两侧 */
    align-items: center;
    box-shadow: none;
    position: sticky;
    margin: 0 15px;
    padding: 15px 0;
}
.logo a {
    text-decoration: none;
    font-size: 30px;
    font-weight: bold;
    color: white;
    font-family: cursive;
    cursor: pointer;
}
header>nav ul {
    display: flex;
    align-items: center;
}
nav ul li {
    margin: 0 23px;
    list-style: none;
}
nav ul li a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 18px;
    transition: all 0.3s ease-out;
}
nav ul li a:hover {
    cursor: pointer;
    color: var(--text-hover);
    transform: scale(1.3);
}
.social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    background: none;
}
.social img {
    transition: all 0.3s ease-out;
}
.social img:hover {
    cursor: pointer;
    transform: scale(1.3);
}

/* 汉堡菜单基础样式 */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
}
.hamburger,
.hamburger::before,
.hamburger::after {
    width: 25px;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease;
}
.hamburger::before,
.hamburger::after {
    content: '';
    display: block;
}
.hamburger::before {
    transform: translateY(-8px);
}
.hamburger::after {
    transform: translateY(5px);
}

/* 菜单打开时的汉堡图标动画 */
.menu-open .hamburger {
    background-color: transparent;
}
.menu-open .hamburger::before {
    transform: rotate(45deg) translateY(0);
}
.menu-open .hamburger::after {
    transform: rotate(-45deg) translateY(0);
}

/* 移动端响应式设置（断点调整为768px，覆盖更多设备） */
@media screen and (max-width: 768px) {
    .menu-toggle {
        display: flex;
        cursor: pointer;
    }
    /* 默认隐藏导航链接 */
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--background);
        padding: 20px 0;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 10;
        gap: 15px;
    }
    .nav-links li {
        margin: 0;
        text-align: center;
    }
    /* 移动端社交图标样式 */
    .mobile-social {
        display: flex;
        gap: 30px;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    /* 隐藏桌面端社交栏 */
    .social {
        display: none;
    }
    /* 菜单打开时显示导航链接 */
    .menu-open .nav-links {
        display: flex;
    }
}

3. 修正后的JS代码 #

const menuToggle = document.querySelector('.menu-toggle');
const nav = document.querySelector('nav'); // 将切换类加到nav上，避免影响全局body

menuToggle.addEventListener('click', () => {
    nav.classList.toggle('menu-open');
    // 点击菜单外区域自动关闭（可选增强）
    document.addEventListener('click', (e) => {
        if (!nav.contains(e.target) && !menuToggle.contains(e.target)) {
            nav.classList.remove('menu-open');
        }
    });
});

关键修改说明 #

1. HTML结构优化：给导航列表添加nav-links类，将社交图标移入移动端菜单，同时保留桌面端独立显示
2. 汉堡图标样式：通过伪元素实现三条横线，并添加点击后的叉号动画，让用户清晰识别可点击按钮
3. 响应式布局调整：将断点从370px改为768px，适配更多设备；修改nav的justify-content为space-between，优化移动端布局
4. JS逻辑优化：将menu-open类加到nav元素上，避免影响全局body；添加点击外部关闭菜单的增强功能
5. 社交图标显示逻辑：移动端默认隐藏桌面社交栏，菜单打开时显示内嵌的社交图标，保证移动端体验完整

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