0

我对全屏菜单有疑问。我希望它在滚动和使用页面时透明。但是当我点击右上角的汉堡包图标时，全屏菜单会打开。问题是我无法修复背景以在打开时获得黑色。它保持透明。有人可以帮我在点击时让菜单的背景变黑吗？

这是我在标题中使用的代码

菜单切换动画

<html>
  <div id="wrapper">
  <span class="label">Click for animation.</span>
  <div id="smallWrapper">
    <input type="checkbox">
    <div id="bars">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
  </div>
</div>
</html>

<style>
#wrapper {
  width:100%;
  height:100%;
}

.label {
  position: absolute;
  top: calc(50% - 3em);
  left: calc(50% - 2em);
  font-size: 50px;
  width: 4em;
  font-family: sans-serif;
  color: #CCC;
}

#smallWrapper {
  position:absolute;
  top:calc(50% - 20px);
  left:calc(50% - 20px);
}

input {
  opacity:0;
  z-index:1;
  width:40px;
  height:40px;
  margin:0;
  padding:0;
  position:absolute;
  appearance: none;
}

#bars {
  width:40px;
  height:35.3333333333333333px;
  padding-top: 4.6666666666666666666px;
  border-radius: 10px;
  transition: background-color 0.2s,  transform 0.3s ease-in-out;
}

.bar {
  width 40px;
  height: 4px;
  margin-bottom: 9.3333333333333333px;
  background: #fff;
  transition: transform 0.2s ease-in-out, color 0.5s linear;

}

input:checked + #bars {
  background-color: hsla(0, 100%, 20%, 0.0);
  transform: rotate(270deg);
}

input:checked + #bars .bar {
  background:#fff;
}

input:checked + #bars .bar:first-child {
  transform: rotate(45deg) translate(10px, 9.33333333333333333px);
}

input:checked + #bars .bar:nth-child(2) {
  transform-origin: 50% 50%;
  transform: rotate(-45deg);
}

input:checked + #bars .bar:last-child {
  transform: rotate(45deg) translate(-10px, -9.33333333333333333px);
}
</style>

菜单转换为全屏动画：

<script>jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});</script>

<style>
section-transform{
cursor: pointer;    
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #000000 !important; 
}   
.section-transform {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
</style>

属于上述css的JS：

<script>
$('#hamburger').click(function() {
  $( this ).toggleClass( "active" );
});
</script>

我希望有人可以帮助我。该网站的 URL 是www.nr-design.nl

在此先感谢，尼克

4

1 回答 1

0

嘿，当您单击它时，使用 onClick 功能使您的背景变黑

于 2020-10-08T08:41:01.130 回答