根据BG图像动态更改“汉堡包”导航

I'm looking for a way to dynamically change the colour of my 'hamburger' nav element depending on the colour of the image that it floats on top of.

我正在寻找一种方法来动态改变我的'汉堡'导航元素的颜色,这取决于它浮在上面的图像的颜色。

I'm using Kenneth Cache's neat 'backgroundcheck.js' script on my text elements. This works by deleting the color of the image and then applying a class (either .background--light or .background--dark respectively) but it doesn't seem to work on my hamburger probably for two reasons -

我在我的文本元素上使用Kenneth Cache的整洁'backgroundcheck.js'脚本。这可以通过删除图像的颜色,然后应用一个类(.background - light或.background - 分别是黑暗),但它似乎不适用于我的汉堡包可能有两个原因 -

I'm using pseudo classes (::before and ::after)

我正在使用伪类(:: before和:: after)

The navigation uses background-color but I can't use this in my .background-light or background--dark elements as it then fills in my other elements which need to have an 'invisible' BG.

导航使用背景颜色,但我不能在我的.background-light或background - dark元素中使用它,因为它填充了我需要有“隐形”BG的其他元素。

My hamburger is set-up as follows -

我的汉堡包的设置如下 -

$(document).ready(function() {
	  jQuery('.mobilemenu').click(function(e) {
	    jQuery(this).toggleClass('is-active');
	    jQuery('.mobile-nav').toggleClass('active');

	    var delay = 100;
	    $('.linkitem').each(function(i, e) {
	      setTimeout(function() {
	        $(e).toggleClass('animate');
	      }, i * delay);
	    });
	  });
	});

.mobile-nav {
  width: 100%;
  height: 0%;
  opacity: .0;
  background-color: #000000;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  transition: height .25s ease-in-out, opacity .55s;
  -moz-transition: height .25s ease-in-out, opacity .55s;
  -webkit-transition: height .25s ease-in-out, opacity .55s;
}
.mobile-nav.active {
  display: block;
  visibility: visible;
  opacity: .85;
  height: 100%;
  transition: height .35s ease-in-out, opacity .55s;
  -moz-transition: height .35s ease-in-out, opacity .55s;
  -webkit-transition: height .35s ease-in-out, opacity .55s;
}

.mobile-link-container {
  visibility: inherit;
  display: table;
  height: 100%;
  width: 100%;
}
.mobile-links {
  visibility: inherit;
  display: table-cell;
  vertical-align: middle;
  color: #FFFFFF;
  padding-left: 5%;
  font-size: 3.5em;
  letter-spacing: .1em;
  list-style-type: none;
}
.mobile-links ul {
  list-style-type: none;
  padding-left: 0;
}
.mobilemenu {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 35px;
  height: 50px;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
  z-index: 1010;
  background: none;
}
.mobilemenu:focus {
  outline: none;
}
.mobilemenu span {
  display: block;
  position: absolute;
  top: 25px;
  left: 5px;
  right: 5px;
  height: 3px;
  background: #000000;
}
.mobilemenu span::before,
.mobilemenu span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #000000;
  content: "";
}
.mobilemenu span::before {
  top: -8px;
}
.mobilemenu span::after {
  bottom: -8px;
}
.mobilemenu--htx {
  background-color: none;
}
.mobilemenu--htx span {
  transition: background 0s 0.3s;
}
.mobilemenu--htx span::before,
.mobilemenu--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}
.mobilemenu--htx span::before {
  transition-property: top, transform;
}
.mobilemenu--htx span::after {
  transition-property: bottom, transform;
}
/* active state, i.e. menu open */

.mobilemenu--htx.is-active {
  background-color: none;
}
.mobilemenu--htx.is-active span {
  background: none;
}
.mobilemenu--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
  background-color: #FFFFFF;
}
.mobilemenu--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
  background-color: #FFFFFF;
}
.mobilemenu--htx.is-active span::before,
.mobilemenu--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
}
.animate {
  visibility: inherit;
  transform: scale(2, 2) translateX(-100px);
  animation-name: scalenav;
  animation-duration: .50s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobile-nav">
  <div class="mobile-link-container">
    <div class="mobile-links">
      <ul>
        Nav Link 1, Nav link 2, Nav link 3
      </ul>
    </div>
  </div>
</div>
<button class="mobilemenu mobilemenu--htx">
  <span></span>
</button>

The two classes that background-check.js applies to elements are:

background-check.js应用于元素的两个类是:

.background--light {
    color: #000000 !important;
    fill: #000000;
}

.background--dark {
    color: #FFFFFF !important;
    fill: #FFFFFF;
}

I've tried to use fill: on my .mobilemenu element and also tried adding background-color to the two '--light' and '--dark' classes but that just interferes with all the other elements on my page that I'm also applying them too, and also doesn't seem to affect the ::before and ::after menu classes

我试过在我的.mobilemenu元素上使用fill:并尝试在两个'--light'和'--dark'类中添加背景颜色,但这只会干扰我页面上的所有其他元素。我也应用它们,也似乎不影响:: before和:: after菜单类

Is there another option to change the hamburger colors dynamically?

还有其他选项可以动态更改汉堡包颜色吗?

I'm open to rewriting the hamburger and getting rid of the psuedo-classes if that helps - the only stipulation is that it must be pure CSS and I want to keep the animation.

如果有帮助,我愿意改写汉堡包并摆脱伪造的类 - 唯一的规定是它必须是纯CSS并且我想保留动画。

1 个解决方案

#1

Add the !important to rewrite the hamburger, like this:

添加!important来重写汉堡包,如下所示:

.mobilemenu--htx.is-active {
  background-color: red !important;
}
.mobilemenu--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
  background-color: red !important;
}
.mobilemenu--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
  background-color: blue !important;
}

It can change the hamburger background color. https://jsfiddle.net/jp6gpdd7/

它可以改变汉堡包的背景颜色。 https://jsfiddle.net/jp6gpdd7/

#1