时间戳

首页 > 解决方案 > 导航栏菜单响应

javascript - 导航栏菜单响应

问题描述

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

我有一个导航栏（nav）菜单，在计算机中显示如下：

在此处输入图像描述

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

在此处输入图像描述

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

当我们单击汉堡按钮时，列表菜单（元素）必须从右到左出现 translateX(0% )，因为我最初将列表转换为 transform:translateX(-100%) 以退出屏幕（我在 body 中添加了一个 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和每次单击它时的类切换，我可以看到类添加和删除到），但是转换： translateX(0%)，它不起作用。

在此处输入图像描述

我不知道为什么？

标签： javascriptcssdom-eventscss-transformshamburger-menu

解决方案

问题在于 CSS 的特殊性；for 的类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 。

推荐阅读