导航栏菜单响应

Question

我正在尝试用 CSS/JS 制作一个 汉堡菜单。

我有一个 navbar (nav) 菜单，在计算机中显示如下：

在汉堡菜单中，当分辨率小于 768 像素（平板电脑和低于此分辨率的设备的分辨率）时，如下所示：

当我们在计算机中时，汉堡菜单按钮是隐藏的（显示：无），但我让它在分辨率为 (>768px) 时出现，并显示出来，并且使用 Javascript 我抓住这个按钮并向它添加事件监听器。

当我们点击汉堡按钮时，列表菜单（元素）必须使用 translateX(0%) 从右到左出现，因为我使列表最初进行了转换： translateX(-100%) 走出屏幕（我在正文中添加一个overflow-x:hidden来隐藏多余的并提供一个水平滚动条，无论如何）..

ul.nav_links 最初的样式：

                position: absolute;
                right: 0;
                top: 8vh;
                height: 92vh;
                background-color: rgb(68, 122, 122);
                display: flex;
                flex-direction: column;
                width: 50%;
                transition: transform 2s;
                transform: translateX(100%);

我要添加的类（只是回到0%）：

// Class to add in JavaScript
.nav_active {
    transform: translateX(0%);
}

Js 代码：

//grabbing the burger button
let burger=document.querySelector(".burger");
//grabbing the ul element with class (nav_links)
let nav=document.querySelector(".nav_links");

//Add the listener to burger button, that have to toggle the class "nav_active"
burger.addEventListener("click",()=>{
    nav.classList.toggle("nav_active");
})

但由于某种原因，类（名为：nav_active）正在正确添加到（我使用 Chrome 的 devtools，并且每次单击它时都会切换类，我可以看到类添加和删除到），但是transform:translateX(0%)，它不起作用。

不知道为什么？

Answer 1

问题在于 CSS 的特殊性； ul.nav_links 的类将比 .nav_active 类具有更高的优先级。

级联顺序如下：（复制自以下w3schools链接）

1. 内联样式 - 内联样式直接附加到要设置样式的元素上。示例：<h1 style="color: #ffffff;">。
2. ID - ID 是页面元素的唯一标识符，例如 #navbar。
3. 类、属性和伪类 - 此类别包括 .classes、[attributes] 和伪类，例如 :hover、:focus 等。
4. 元素和伪元素 - 此类别包括元素名称和伪元素，例如 h1、div、:before 和 :after。

所以.nav_active 被更高特异性的类覆盖，在这个例子中意味着元素+类。如果它们具有相同的特异性水平（例如ul.nav_links 和ul.nav_active），那么稍后定义的就是优先级。

您可能会发现将.nav_active 类更改为ul.nav_active 甚至ul.nav_links.nav_active 就足以使活动类正确应用。

有关如何更好地理解/计算特异性水平的一些详细信息，请参阅https://www.w3schools.com/css/css_specificity.asp。

Answer 2

我不确定，但你可以试试这个吗？

.nav_active {
    transform: translateX(0%) !important;
}