如何实现带动画效果的侧滑式汉堡响应式导航菜单

原有index.html结构不需要做任何修改，已满足侧滑导航的DOM要求，仅需补充样式、更新交互逻辑即可。

1. 补充/调整样式代码 #

1.1 必要小调整（原有规则修改） #

找到原有.hamburger样式中的z-index: 1配置，修改为z-index: 999，保证汉堡按钮始终在侧滑导航最上层，不会被遮挡导致无法点击关闭。

1.2 新增SASS规则（直接追加到style.sass末尾即可） #

/* 移动端侧滑导航基础样式 */
.mobile-nav
    position: fixed
    top: 0
    right: 0
    width: 280px
    min-height: 100vh
    padding-top: 96px
    background-color: $dark
    z-index: 98
    transform: translateX(100%)
    transition: 0.4s ease-in-out
    display: flex
    flex-direction: column
    gap: 8px
    a
        display: block
        padding: 16px 32px
        color: $light
        font-size: 18px
        font-weight: 600
        text-decoration: none
        transition: 0.3s
        opacity: 0
        transform: translateX(20px)
    a.is-active, a:hover
        background-color: $primary
        color: #fff

/* 导航打开状态 */
.mobile-nav.is-open
    transform: translateX(0)
    a
        opacity: 1
        transform: translateX(0)
    /* 菜单项错峰入场延迟 */
    a:nth-child(1)
        transition-delay: 0.1s
    a:nth-child(2)
        transition-delay: 0.15s
    a:nth-child(3)
        transition-delay: 0.2s
    a:nth-child(4)
        transition-delay: 0.25s

/* 半透明遮罩层 */
body::after
    content: ''
    position: fixed
    inset: 0
    background-color: rgba(0,0,0,0.5)
    opacity: 0
    pointer-events: none
    transition: 0.3s
    z-index: 97
body.nav-open::after
    opacity: 1
    pointer-events: auto

/* PC端隐藏移动端导航 */
@media (min-width: 768px)
    .mobile-nav, body::after
        display: none

如果直接修改编译后的CSS文件，把SASS变量替换为对应色值即可：$primary: #8c38ff、$light: #eeeeee、$dark: #212121。

2. 更新main.js交互逻辑 #

替换原有main.js的全部代码即可，保留原有汉堡按钮变形动画的同时，新增侧滑导航控制、遮罩点击关闭、菜单项点击自动关闭功能：

const hamburgerBtn = document.querySelector('.hamburger')
const mobileNav = document.querySelector('.mobile-nav')
const pageBody = document.body

// 汉堡按钮点击切换导航状态
hamburgerBtn.addEventListener('click', () => {
    hamburgerBtn.classList.toggle('is-active')
    mobileNav.classList.toggle('is-open')
    pageBody.classList.toggle('nav-open')
})

// 点击遮罩区域关闭导航
pageBody.addEventListener('click', (e) => {
    if (e.target === pageBody && pageBody.classList.contains('nav-open')) {
        hamburgerBtn.classList.remove('is-active')
        mobileNav.classList.remove('is-open')
        pageBody.classList.remove('nav-open')
    }
})

// 点击移动端菜单项后自动关闭导航
mobileNav.querySelectorAll('a').forEach(navLink => {
    navLink.addEventListener('click', () => {
        hamburgerBtn.classList.remove('is-active')
        mobileNav.classList.remove('is-open')
        pageBody.classList.remove('nav-open')
    })
})

3. 最终效果 #

• 默认状态下移动端导航完全移出屏幕右侧，不可见
• 点击汉堡按钮时，导航以0.4s缓动动画从右侧滑入，菜单项按顺序错峰淡入，和汉堡图标变叉的动画节奏完全匹配
• 导航展开时自动弹出半透明黑色遮罩，弱化主内容、突出导航层
• 点击遮罩、任意移动端菜单项都会触发关闭动画，导航滑出屏幕，汉堡按钮恢复默认三条杠样式
• 屏幕宽度≥768px时，移动端导航、遮罩、汉堡按钮自动隐藏，完全不影响原有PC端导航的显示逻辑

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