我正在尝试使用 CSS/JS 制作一个汉堡菜单。
我有一个导航栏(导航)菜单,在计算机中显示如下:
并且在汉堡菜单中,当分辨率小于 768 像素(平板电脑和低于此分辨率的设备的分辨率)时,如下所示:
当我们在计算机中时,汉堡菜单按钮是隐藏的(显示:无),但是当分辨率为(> 768px)时我让它出现并显示出来,并且使用Javascript我抓住这个按钮并给它添加事件监听器。
当我们点击汉堡按钮时,一个列表菜单(元素)必须用 translateX(0%) 从右到左出现,因为我使列表最初进行了转换: translateX(-100%) 离开屏幕(我在正文中添加一个溢出-x:隐藏以隐藏多余的并提供一个水平滚动条,无论如何)..< /p>
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 的开发工具,每次点击它时类切换,我可以看到类添加和删除),但是translateX(0%),它不起作用。
我不知道为什么?
答案 0 :(得分:1)
我不确定,但你能试试这个吗?
.nav_active {
transform: translateX(0%) !important;
}
答案 1 :(得分:1)
问题是CSS的特殊性; ul.nav_links
的类将比 .nav_active
类具有更高的优先级。
级联顺序如下:(复制自下方w3schools链接)
<h1 style="color: #ffffff;">
。所以 .nav_active
被更高特异性的类覆盖,在这个例子中意味着元素 + 类。如果它们具有相同级别的特异性(例如,ul.nav_links
和 ul.nav_active
),则定义为 LATER 的那个优先。
您可能会发现将 .nav_active
类更改为 ul.nav_active
甚至 ul.nav_links.nav_active
就足以使活动类正确应用。
有关如何更好地理解/计算特异性水平的一些详细信息,请参阅 https://www.w3schools.com/css/css_specificity.asp。