如何在移动视图中切换导航栏滑动?

Question

我希望我的导航栏滑动通过点击它的图标在移动视图，但我有一些问题。它不会通过点击来滑动。我确信我已经遵循了正确的js语法。

let navbar = document.querySelector(".navbar");
document.querySelector("#menu-btn").onclick = () => {
navbar.classList.toggle("active");
}

.header .navbar {
position: absolute;
top: 100%;
left: -100%;
background: #13131a;
width: 30rem;
height: calc(100vh - 9.5rem);
align-items: flex-start;
flex-direction: column;
justify-content: flex-start;
overflow: hidden;
}
.header .navbar .active {
left: 0;
}

<div class="navbar mx-auto ">
<a asp-action="Index">صفحه اصلی</a>
<a href="#products">محصولات</a>
<a href="#about">درباره ما</a>
<a href="#contact">ارتباط با ما</a>
</div>
<div class="icons">
<i class="fa-solid fa-cart-shopping "></i>
<i class="fa-solid fa-magnifying-glass "></i>
<i class="fa-solid fa-right-to-bracket "></i>
<i class="fa-solid fa-bars" `id="menu-btn"`></i>
</div>

我只是不知道我哪里错了。当我点击栏图标，但没有滑动到导航栏时，CSS类正在改变。

Answer 1

我认为你的css的主要问题是:

.header .navbar .active {
left: 0;
}

因为在。active之间有一个空格，它会在导航栏div中寻找一个类为active的元素，但是没有。

所以这里应该改成

.header .navbar.active {
left: 0;
}

其他次要事项:在您的示例中，id="menu-btn"周围有一些反引号，应该删除。

你还没有在你的例子中包括头类，但我认为这应该是好的，只要它在一个元素包装一切。

top:100%看起来有点奇怪，但也许还可以。