制作响应式导航栏

Question

我刚开始学习javascript，遇到了这个问题。问题是我正在制作一个响应式布局，我想在单击菜单按钮时显示导航栏从右向左移动，但我似乎无法做到这一点。我看过不同的教程并尝试了很多东西，但它们似乎都不起作用。 我希望有人能在这方面帮助我。

这是我的导航栏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;

                    .toggle{
                    box-shadow: -2px 2px 20px black;
                    left: 0%;
                    }

这是我写的脚本

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


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

抱歉问了这么简单的问题。

Answer 1

一切都很好，您没有在单击关闭按钮时删除切换类，所以：

 closeBtn.addEventListener('click',()=>{
    nav.classList.remove("toggle")
})