Question

我正在寻找一种方法来动态改变我的汉堡包的颜色＆＃39; nav元素取决于它浮在上面的图像的颜色。

我正在使用Kenneth Cache的整洁＆＃39; backgroundcheck.js＆＃39;我的文本元素上的脚本。这可以通过删除图像的颜色然后应用一个类（分别为.background--light或.background--dark）来实现，但它似乎对我的汉堡包起作用可能有两个原因 -

我使用伪类（::before和::after）
导航使用background-color，但我无法在.background-light或background--dark元素中使用此功能，因为它会填充我需要拥有＆＃39的其他元素不可见＆＃39; BG。

我的汉堡包的设置如下 -

＆＃13;

$(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);
	    });
	  });
	});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

background-check.js适用于元素的两个类是：

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

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

我尝试在我的fill:元素上使用.mobilemenu，并尝试将background-color添加到“{1}” - ＆＃39; - ＆＃39;和＆＃39; - 黑暗＆＃39;类，但这只会干扰我页面上的所有其他元素，我也会应用它们，而且似乎也不会影响::before和::after菜单类

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

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

Answer 1

添加!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;
}

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

动态改变汉堡包＆＃39;导航取决于BG图像

1 个答案: