- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在尝试更改响应式网站的粘性导航中汉堡包菜单的颜色。
目前,导航栏和菜单使用 css 和 js 进行样式设置和切换。
一切正常,但最近我不得不进行一些更改并遇到了这个问题。
这是它的工作原理;- 导航栏固定在屏幕顶部并在滚动时改变颜色。- 在窄屏幕上,一些 js 隐藏菜单文本链接并切换汉堡菜单。- 单击汉堡菜单时,会切换覆盖菜单
我遇到的问题是我已经更改了滚动条上粘性菜单栏的背景颜色 - 但我看不到如何更改滚动条上汉堡包图标的颜色。
这是我所拥有的...
<!-- Script Sticky Menu -->
<script type="text/javascript">
window.addEventListener("scroll", function(){
if(window.pageYOffset > 50){
document.getElementById("main-nav").className = "scrolling";
} else {
document.getElementById("main-nav").className = "";
}
if(window.pageYOffset > 50){
document.getElementById("nav-page-section").className = "scrolling";
} else {
document.getElementById("nav-page-section").className = "";
}
if(window.pageYOffset > 50){
document.getElementById("vb-logo-mobile").className = "scrolling";
} else {
document.getElementById("vb-logo-mobile").className = "";
}
})
</script>
在“nav-page-section”内是汉堡包按钮的容器...
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
此 css 样式 button_container...
.button_container span {
background: #fff;
border: none;
height: 2px;
width: 90%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
最初,我在脚本中添加了一行...
if(window.pageYOffset > 50){
document.getElementsByClassName("button_container").className = "scrolling";
} else {
document.getElementsByClassName("button_container").className = "";
}
并添加了这个 css 样式...
.button_container.scrolling {
background: #E4002B;
color: #E4002B;
}
但这并没有奏效。我四处寻找一种方法来定位类名(“button_container”)中的特定标签(“span”),但没有找到任何东西。
我一直在查看 span 标签,并认为这就是让我感到困惑的原因 - 但我已经尝试了脚本的许多不同变体,但似乎没有任何效果。当我在类名后添加 [0] - ('button_container')[0] - 汉堡菜单消失。
有人有什么想法吗?
谢谢。
这是完整的 CSS 和 HTML...
/* 7. Main Menu - Hamburger */
/* icon+overlay */
.overlay-menu ul li a {
display: inline-block;
position: relative;
text-align: center;
color: #fff;
text-decoration: none;
font-size: 20px;
font-family: 'HurmeGeometricSans1';
font-weight: 200;
overflow: hidden;
top: 5px;
}
.overlay-menu ul li a:after {
content: '';
position: absolute;
background: #E4002B;
height: 2px;
width: 0%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.overlay-menu ul li a:hover:after, .overlay-menu ul li a:focus:after, .overlay-menu ul li a:active:after {
width: 100%;
}
.button_container {
position: fixed;
top: 18px;
right: 18px;
height: 26px;
width: 30px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
-webkit-transform: translateY(11px) translateX(0) rotate(45deg);
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #fff;
border: none;
height: 2px;
width: 90%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button_container.scrolling {
background: #E4002B;
color: #E4002B;
}
.button_container span:nth-of-type(2) {
top: 11px;
}
.button_container span:nth-of-type(3) {
top: 22px;
}
<!-- start Hamburger Menu & Overlay Menu -->
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li><a href="vwear.html">V:WEAR</a></li>
<li><a href="vgear.html">V:GEAR</a></li>
<li><a href="mechs.html">V:MECHS</a></li>
<li><a href="rdas.html">V:RDAS</a></li>
<li><a href="vliquids.html">V:LIQUID</a></li>
</ul>
</nav>
</div>
<!-- end Hamburger Menu & Overlay Menu -->
最佳答案
据我所知,button_container 中的 spans 是汉堡菜单的栏。所以,要改变滚动条的颜色,我会说:
.scrolling .button_container span {
background-color: red;
}
将 red
替换为首选颜色。
关于javascript - 在响应式粘性导航栏中更改汉堡包图标的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55027316/
我需要将抽屉导航图标(汉堡包)从操作栏移动到选项卡布局,以使其看起来像提供的示例。那应该在列表滚动上执行。是否有可能将 View 从操作栏移动到选项卡布局? 操作栏 预期结果 最佳答案 您可以像这样在
我一直在寻找这个问题很长一段时间,但找不到任何解决方案。 我想实现这种按钮,当抽屉关闭时,它看起来像一个汉堡包抽屉导航按钮。但是当它打开时,图标会动画并转换为“后退按钮”,如图所示。 最佳答案 那是
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and t
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-top
我对 html、css、js 和 bootstrap 4 还很陌生。我正在尝试建立一个网站来练习我的技能。我终于设法改变了我的 bootstrap 4 导航栏的颜色、文本、字体大小等,但是当我缩小时,
我想为我的导航栏设置自定义颜色 (#5f788a),但是,据我所知,为了在移动版本中使用切换菜单,导航栏类必须是 navbar-light或 navbar-dark(根据 Bootstrap)。当然,
只是想知道是否有任何方法可以调整 Bootstrap 的导航栏切换器图标的大小? 我使用 .navbar-dark 主题作为模板,尺寸如下: .navbar-dark { background-c
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 4 年前。 Improve this q
关闭。这个问题是opinion-based .它目前不接受答案。 想改善这个问题吗?更新问题,以便可以通过 editing this post 用事实和引文回答问题. 2年前关闭。 Improve t
我正在使用 bootstrap 4 构建这个导航栏。 导航栏工作正常,但有一个问题我无法自己解决。 在折叠时,汉堡包图标显示两行而不是三行。我不确定汉堡包为什么会这样出现,但我确定它与伪元素有关。 我
我是一名优秀的程序员,十分优秀!