我正在使用twitter bootstrap CSS制作菜单。 对于移动版本,我想给一些图标添加文字。 我想在768px的断点处执行此操作(当出现汉堡包图标时)。 菜单html Java脚本 但是宽度不是引导CSS中使用的实际宽度。 我想在显示汉堡图标时进行更改。 ...
提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
我正在尝试使用CSS/JS制作汉堡菜单。
我有一个导航栏(nav)菜单,在计算机中显示如下:
在汉堡菜单中,当分辨率小于 768 像素(平板电脑和低于此分辨率的设备的分辨率)时,如下所示:
当我们在计算机中时,汉堡菜单按钮是隐藏的(显示:无) ,但我让它在分辨率为(> 768px)时出现,并显示出来,并且使用 Javascript 我抓住这个按钮并向它添加事件监听器。
当我们点击汉堡按钮时,一个列表菜单(元素)必须从右到左出现 translateX(0% ),因为我最初将列表转换为:translateX(-100%) 到 go 出屏幕(我在 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%);
我要添加的 class (只是返回 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");
})
但是由于某种原因,class(命名为:nav_active)正确添加到(我使用Chrome 的开发工具和 class 切换每次我点击它时,我可以看到 ZA2F2ED4F8EBC2CBB4C21A29DDC40AB6 ) translateX(0%),它不起作用。
我不知道为什么?
我不确定,但你能试试这个吗?
.nav_active {
transform: translateX(0%) !important;
}
问题是 CSS 特异性; ul.nav_links 的ul.nav_links
将比仅.nav_active
class 具有更高的优先级。
级联顺序如下:(从下面的w3schools链接复制)
<h1 style="color: #ffffff;">
。 所以.nav_active
被更高特异性的 class 覆盖,在这个例子中意味着元素 + class。 如果它们具有相同级别的特异性(例如ul.nav_links
和ul.nav_active
),那么稍后定义的那个就是优先的那个。
您可能会发现将.nav_active
class 更改为ul.nav_active
甚至ul.nav_links.nav_active
就足以使活动 class 正确应用。
有关如何更好地理解/计算特异性水平的一些详细信息,请参阅https://www.w3schools.com/css/css_specificity.asp 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.