制作响应式导航栏时点击菜单无法实现从右向左滑入效果求助

问题排查及修复方案 #

1. CSS语法及逻辑错误 #

• 原生CSS不支持你写的嵌套选择器格式，你将.toggle写在.navbar的代码块内，浏览器无法正确识别该规则，需要调整为独立的同级选择器，同时选择器需要改为.navbar.toggle（表示同时带有navbar和toggle两个类的元素）。如果你使用的是Sass/Scss等预处理器，嵌套写法也需要加&符号指代父类，否则最终编译出的选择器会变成.navbar .toggle（匹配navbar的子元素），无法生效。
• 定位属性冲突：你默认使用right: -100%隐藏导航栏，但触发显示时设置的是left: 0%，两个横向定位属性同时存在会导致布局逻辑混乱，统一使用right属性控制显示隐藏即可。
• 代码块未闭合：你提供的CSS代码缺少两个闭合花括号，会导致后续样式解析失败。

2. 补充缺失的关闭逻辑 #

你已经声明了closeBtn变量，但未绑定对应的点击移除toggle类的事件，无法实现关闭菜单的功能。

修复后的代码 #

CSS代码（原生CSS版本）

.navbar{
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 90vw;
    max-width: 400px;
    padding: 70px 0;
    background-color: lightskyblue;
    transition: all ease 200ms;
}
.navbar.toggle{
    box-shadow: -2px 2px 20px black;
    right: 0%;
}

如果使用Sass/Scss，可使用嵌套写法：

.navbar{
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 90vw;
    max-width: 400px;
    padding: 70px 0;
    background-color: lightskyblue;
    transition: all ease 200ms;
    &.toggle{
        box-shadow: -2px 2px 20px black;
        right: 0%;
    }
}

JS代码

const nav = document.querySelector('.navbar')
const menuBtn = document.querySelector('.menu--active')
const closeBtn = document.querySelector('.menu--close')

menuBtn.addEventListener('click',()=>{
    nav.classList.add("toggle")
})

// 补充关闭按钮逻辑
closeBtn.addEventListener('click',()=>{
    nav.classList.remove("toggle")
})

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