繁体   English   中英

导航栏菜单响应

NavBar Menu Responsive

提示:本站收集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%),它不起作用。

在此处输入图像描述

我不知道为什么?

2 个回复

我不确定,但你能试试这个吗?

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

问题是 CSS 特异性; ul.nav_links 的ul.nav_links将比仅.nav_active class 具有更高的优先级。

级联顺序如下:(从下面的w3schools链接复制)

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

所以.nav_active被更高特异性的 class 覆盖,在这个例子中意味着元素 + class。 如果它们具有相同级别的特异性(例如ul.nav_linksul.nav_active ),那么稍后定义的那个就是优先的那个。

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

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

1 导航栏响应菜单

我正在使用twitter bootstrap CSS制作菜单。 对于移动版本,我想给一些图标添加文字。 我想在768px的断点处执行此操作(当出现汉堡包图标时)。 菜单html Java脚本 但是宽度不是引导CSS中使用的实际宽度。 我想在显示汉堡图标时进行更改。 ...

2 响应式导航栏多菜单

我有一个水平导航栏,可以折叠到移动设备的下拉菜单中。 我的问题是,“ Portfolio”项的子菜单没有重定向到移动设备中的链接,但是当视图为全角时会出现。 当未分配任何链接但添加链接后,该移动设备视图便不可单击,它可以工作。 任何帮助是极大的赞赏。 谢谢 &lt ...

2015-08-12 12:47:55 0 72   mobile
3 导航栏悬停响应(导航菜单)

如何在手机中单击导航图标(而不是将鼠标悬停),它将显示一个带有链接的小容器。 这是我的编码。 HTML CSS 响应式CSS 这是JSFIDDLE签出。 问题是我将导航div悬停在各处,并且显示菜单。 我想要的是单击导航图标,它将出现在菜单上? 有任何想法吗 ...

4 导航栏菜单在iPad上响应

我在平板电脑和ipad(迷你和空中)上的网站标题出现问题。 菜单未响应,仅在PC和智能手机上有效 我在Bootply上尝试了它,并且效果很好: http://www.bootply.com/lM8zFcgKl7 我网站上的屏幕: 我的网站网址: http : //ww ...

5 响应式导航栏,带子菜单

我需要制作一个包含项目和子项目的响应式导航栏菜单。 我尝试过使用bootstrap,但是添加子菜单会变得不方便。 有什么工具,框架,代码或插件可以帮助我吗? 我的网站是用AngularJS制作的。 ...

6 响应式导航栏汉堡菜单

我想让我的导航在移动设备上看起来不错。 我设法进行了移动导航,但是我不知道如何进行汉堡菜单的导航。 当我单击汉堡包图标时,它应该显示所有链接以及搜索栏。 在这里可以看到我的桌面导航设计。 在这里您可以看到我的移动导航设计。 我的HTML: 我的SCSS: ...

7 响应响应式导航栏和汉堡菜单

大家好,我是前端开发的初学者,我需要做出反应响应的导航栏。 我发现一些在 html 中有效但在反应中无效。 我不知道我能不能这样。 我认为问题出在 getElementById 因为 react 不支持它们。 ...

8 Bootstrap 响应侧边栏菜单到顶部导航栏

所以我一直在寻找和寻找这方面的指导,但无济于事。 基本上,我只想有一个侧边栏,但是当屏幕变小(也就是智能手机屏幕尺寸)时,它会变成导航栏。 我的侧边栏 HTML 代码是这样的: 我的CSS: 我不知道如何将其放入导航栏。 我所知道的是如何从一开始就制作导航栏,但我不想那样做! 我不想要任 ...

9 响应式网页:顶部导航栏到菜单下拉菜单

我正在学习如何使用html,css和js制作网站。 我一直在通过极端的反复试验来学习,最近发现了什么是响应式网页,我绝对喜欢它的概念。 现在,我一直在干预w3学校模板以查看一些设计模式。 我遇到了一个似乎尚未找到答案的错误。 让我们说清楚。 在Chrome上,当我将浏览器大小切 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM