如何解决导航栏菜单响应
我正在尝试使用 CSS/JS 制作一个汉堡菜单。
我有一个导航栏(导航)菜单,在计算机中显示如下:
并且在汉堡菜单中,当分辨率小于 768 像素(平板电脑和低于此分辨率的设备的分辨率)时,如下所示:
当我们在计算机中时,汉堡菜单按钮是隐藏的(显示:无),但是当分辨率为(> 768px)时我让它出现并显示出来,并且使用Javascript我抓住这个按钮并给它添加事件监听器。
当我们点击汉堡按钮时,一个列表菜单(元素)必须用 translateX(0%) 从右到左出现,因为我使列表最初进行了转换: translateX(-100%) 离开屏幕(我在正文中添加一个溢出-x:隐藏以隐藏多余的并提供一个水平滚动条,无论如何)..
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%),它不起作用。
我不知道为什么?
解决方法
我不确定,但你能试试这个吗?
.nav_active {
transform: translateX(0%) !important;
}
,
问题是CSS的特殊性; ul.nav_links
的类将比 .nav_active
类具有更高的优先级。
级联顺序如下:(复制自下方w3schools链接)
- 内联样式 - 内联样式直接附加到要设置样式的元素。示例:
<h1 style="color: #ffffff;">
。 - IDs - ID 是页面元素的唯一标识符,例如 #navbar。
- 类、属性和伪类 - 此类别包括 .classes、[属性] 和伪类,例如 :hover、:focus 等。
- 元素和伪元素 - 此类别包括元素名称和伪元素,例如 h1、div、:before 和 :after。
所以 .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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。