在事件中隐藏元素

Question

我有一个使用文本徽标的网站，我的意思是字面上的文本徽标（不是 png 或 jpg 形式的文本）。我希望徽标在导航菜单打开时消失，反之亦然。请注意，导航菜单在打开时会覆盖整个屏幕，这意味着它是一个叠加导航菜单。提前致谢！！

$('#toggle').click(function() {
  $(this).toggleClass('active');
  $('#overlay5').toggleClass('open');
});
$('a.myClass').click(function() {
  $('#toggle').toggleClass('active');
  $('#overlay5').toggleClass('open');
});

@font-face {
  font-family: "LIBRARY 3 AM";
  src: url("Library3am-5V3Z.otf");
  src: url("Library3am-5V3Z.otf") format("opentype"),
}

body {
  background-color: black;
  background-image: repeating-linear-gradient(to bottom, transparent 7px, rgba(0, 0, 0, 0.8) 9px, rgba(0, 0, 0, 0.8) 13px, transparent 13px);
  background-size: 58px 58px;
  background-position: 0 2px, 4px 35px, 29px 31px, 34px 6px
}

.sign {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'LIBRARY 3 AM';
  width: 50%;
  height: 50%;
  background-image: radial-gradient(ellipse 50% 35% at 50% 50%, , transparent);
  transform: translate(-50%, -50%);
  letter-spacing: 2;
  left: 50%;
  top: 50%;
  font-size: 1.7em;
  color: #39b54a;
  text-shadow: 0 0 5px, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
  animation: shine 2s forwards, flicker 3s infinite
}

@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    font-family: 'LIBRARY 3 AM';
    text-shadow: 0 0 5px #39b54a, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
    color: #32cd32
  }
  28%,
  33% {
    color: #32cd32;
    text-shadow: none
  }
  82%,
  97% {
    color: #32cd32;
    text-shadow: none
  }
}

.flicker {
  animation: shine 2s forwards, blink 3s 2s infinite;
  font-family: 'LIBRARY 3 AM'
}

.fast-flicker {
  animation: shine 2s forwards, blink 10s 1s infinite;
  font-family: 'LIBRARY 3 AM'
}

@keyframes shine {
  0% {
    color: #32cd32;
    text-shadow: none
  }
  100% {
    text-shadow: 0 0 5px #39b54a, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
    color: #32cd32
  }
}

@keyframes flicker {
  from {
    opacity: 1
  }
  4% {
    opacity: .9
  }
  6% {
    opacity: .85
  }
  8% {
    opacity: .95
  }
  10% {
    opacity: .9
  }
  11% {
    opacity: .922
  }
  12% {
    opacity: .9
  }
  14% {
    opacity: .95
  }
  16% {
    opacity: .98
  }
  17% {
    opacity: .9
  }
  19% {
    opacity: .93
  }
  20% {
    opacity: .99
  }
  24% {
    opacity: 1
  }
  26% {
    opacity: .94
  }
  28% {
    opacity: .98
  }
  37% {
    opacity: .93
  }
  38% {
    opacity: .5
  }
  39% {
    opacity: .96
  }
  42% {
    opacity: 1
  }
  44% {
    opacity: .97
  }
  46% {
    opacity: .94
  }
  56% {
    opacity: .9
  }
  58% {
    opacity: .9
  }
  60% {
    opacity: .99
  }
  68% {
    opacity: 1
  }
  70% {
    opacity: .9
  }
  72% {
    opacity: .95
  }
  93% {
    opacity: .93
  }
  95% {
    opacity: .95
  }
  97% {
    opacity: .93
  }
  to {
    opacity: 1
  }
}

@-webkit-keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none
  }
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    text-shadow: 0 0 5px #39b54a, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
    color: #32cd32
  }
}

@keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none
  }
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    text-shadow: 0 0 5px #39b54a, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
    color: #32cd32
  }
}


.button_container {
     position: fixed;
     top: 5%;
     right: 2%;
     height: 27px;
     width: 35px;
     cursor: pointer;
     z-index: 100;
     transition: opacity 0.25s ease;
}
 .button_container:hover {
     opacity: 0.7;
}
 .button_container.active .top {
     transform: translateY(10px) translateX(0) rotate(45deg);
     background: #fff;
}
 .button_container.active .middle {
     opacity: 0;
     background: #fff;
}
 .button_container.active .bottom {
     transform: translateY(-10px) translateX(0) rotate(-45deg);
     background: #fff;
}
 .button_container span {
     background: #0087cc;
     border: none;
     height: 5px;
     width: 100%;
     position: absolute;
     top: 0px;
     left: 0;
     transition: all 0.35s ease;
     cursor: pointer;
}
 .button_container span:nth-of-type(2) {
     top: 10px;
}
 .button_container span:nth-of-type(3) {
     top: 20px;
}
 .overlay5 {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     
     visibility: hidden;
     transition: opacity 0.35s, visibility 0.35s, width 0.35s;
     z-index: 50;
}
 .overlay5:before {
     content: '';
     background: black;
     left: -55%;
     top: 0;
     width: 50%;
     height: 100%;
     position: absolute;
     transition: left 0.35s ease;
}
 .overlay5:after {
     content: '';
     background: black;
     right: -55%;
     top: 0;
     width: 50%;
     height: 100%;
     position: absolute;
     transition: all 0.35s ease;
}
 .overlay5.open {
     
     visibility: visible;
     height: 100%;
}
 .overlay5.open:before {
     left: 0;
}
 .overlay5.open:after {
     right: 0;
}
 .overlay5.open li {
     animation: fadeInRight 0.5s ease forwards;
     animation-delay: 0.35s;
}
 .overlay5.open li:nth-of-type(2) {
     animation-delay: 0.45s;
}
 .overlay5.open li:nth-of-type(3) {
     animation-delay: 0.55s;
}
 .overlay5.open li:nth-of-type(4) {
     animation-delay: 0.65s;
}
 .overlay5 nav {
     position: relative;
     height: 70%;
     top: 50%;
     transform: translateY(-50%);
     font-size: 30px;
     font-family: 'Nova';
     font-weight: 400;
     text-align: center;
     z-index: 100;
}
 .overlay5 ul {
     list-style: none;
     padding: 0;
     margin: 0 auto;
     display: inline-block;
     position: relative;
     height: 100%;
}
 .overlay5 ul li {
     display: block;
     height: 25%;
     height: calc(100% / 4);
     min-height: 50px;
     position: relative;
     opacity: 0;
}
 .overlay5 ul li a {
     display: block;
     position: relative;
     color: #fff;
     text-decoration: none;
     overflow: hidden;
}
 .overlay5 ul li a:hover:after, .overlay5 ul li a:focus:after, .overlay5 ul li a:active:after {
     width: 100%;
}
 .overlay5 ul li a:after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     width: 0%;
     transform: translateX(-50%);
     height: 3px;
     background: #fff;
     transition: 0.35s;
}
 @keyframes fadeInRight {
     0% {
         opacity: 0;
         left: 20%;
    }
     100% {
         opacity: 1;
         left: 0;
    }
}

.header-logo {

    display: inline-block;

    position: absolute;

    margin: 0;

    padding-left: 10rem;

    left: 10px;

    top: 10%;

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    z-index: 501;

}



@media only screen and (min-width: 200px) and (max-width: 670px) {

    .header-logo {

        padding: 11rem;

    }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://wallpapersite.com/images/pages/pic_w/17158.jpg">
<div class="header-logo">

  <div class="sign">

    <span class="fast-flicker">C</span>ode<span class="flicker">f</span>is<span class="fast-flicker">hh</span>

  </div>

</div>


<div class="button_container" id="toggle">
  <span class="top"></span>
  <span class="middle"></span>
  <span class="bottom"></span>
</div>

<div class="overlay5" id="overlay5">
  <nav class="overlay-menu">
    <ul>
      <li><a class="myClass smoothscroll1" href="#">Home</a></li>
      <li><a class="myClass smoothscroll2" href="#about">About</a></li>
      <li><a class="myClass smoothscroll3" href="#">Work</a></li>
      <li><a class="myClass smoothscroll4" href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>

Answer 1

我删除了 header-logo class 上的 z-index: 501，它按你的需要工作了。

Answer 2

添加下面给出的 jquery 和 CSS 来显示和隐藏徽标。

Jquery:

  $(".sign").toggleClass('display');

CSS:

.display {
  display: none;
}

$('#toggle').click(function() {
  $(this).toggleClass('active');
  $('#overlay5').toggleClass('open');
  $(".sign").toggleClass('display');
});
$('a.myClass').click(function() {
  $('#toggle').toggleClass('active');
  $('#overlay5').toggleClass('open');
});

@font-face {
  font-family: "LIBRARY 3 AM";
  src: url("Library3am-5V3Z.otf");
  src: url("Library3am-5V3Z.otf") format("opentype"),
}

body {
  background-color: black;
  background-image: repeating-linear-gradient(to bottom, transparent 7px, rgba(0, 0, 0, 0.8) 9px, rgba(0, 0, 0, 0.8) 13px, transparent 13px);
  background-size: 58px 58px;
  background-position: 0 2px, 4px 35px, 29px 31px, 34px 6px
}

.sign {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'LIBRARY 3 AM';
  width: 50%;
  height: 50%;
  background-image: radial-gradient(ellipse 50% 35% at 50% 50%, , transparent);
  transform: translate(-50%, -50%);
  letter-spacing: 2;
  left: 50%;
  top: 50%;
  font-size: 1.7em;
  color: #39b54a;
  text-shadow: 0 0 5px, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
  animation: shine 2s forwards, flicker 3s infinite
}

.display {
  display: none;
}

@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    font-family: 'LIBRARY 3 AM';
    text-shadow: 0 0 5px #39b54a, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
    color: #32cd32
  }
  28%,
  33% {
    color: #32cd32;
    text-shadow: none
  }
  82%,
  97% {
    color: #32cd32;
    text-shadow: none
  }
}

.flicker {
  animation: shine 2s forwards, blink 3s 2s infinite;
  font-family: 'LIBRARY 3 AM'
}

.fast-flicker {
  animation: shine 2s forwards, blink 10s 1s infinite;
  font-family: 'LIBRARY 3 AM'
}

@keyframes shine {
  0% {
    color: #32cd32;
    text-shadow: none
  }
  100% {
    text-shadow: 0 0 5px #39b54a, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
    color: #32cd32
  }
}

@keyframes flicker {
  from {
    opacity: 1
  }
  4% {
    opacity: .9
  }
  6% {
    opacity: .85
  }
  8% {
    opacity: .95
  }
  10% {
    opacity: .9
  }
  11% {
    opacity: .922
  }
  12% {
    opacity: .9
  }
  14% {
    opacity: .95
  }
  16% {
    opacity: .98
  }
  17% {
    opacity: .9
  }
  19% {
    opacity: .93
  }
  20% {
    opacity: .99
  }
  24% {
    opacity: 1
  }
  26% {
    opacity: .94
  }
  28% {
    opacity: .98
  }
  37% {
    opacity: .93
  }
  38% {
    opacity: .5
  }
  39% {
    opacity: .96
  }
  42% {
    opacity: 1
  }
  44% {
    opacity: .97
  }
  46% {
    opacity: .94
  }
  56% {
    opacity: .9
  }
  58% {
    opacity: .9
  }
  60% {
    opacity: .99
  }
  68% {
    opacity: 1
  }
  70% {
    opacity: .9
  }
  72% {
    opacity: .95
  }
  93% {
    opacity: .93
  }
  95% {
    opacity: .95
  }
  97% {
    opacity: .93
  }
  to {
    opacity: 1
  }
}

@-webkit-keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none
  }
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    text-shadow: 0 0 5px #39b54a, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
    color: #32cd32
  }
}

@keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none
  }
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    text-shadow: 0 0 5px #39b54a, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
    color: #32cd32
  }
}

.button_container {
  position: fixed;
  top: 5%;
  right: 2%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  transition: opacity 0.25s ease;
}

.button_container:hover {
  opacity: 0.7;
}

.button_container.active .top {
  transform: translateY(10px) translateX(0) rotate(45deg);
  background: #fff;
}

.button_container.active .middle {
  opacity: 0;
  background: #fff;
}

.button_container.active .bottom {
  transform: translateY(-10px) translateX(0) rotate(-45deg);
  background: #fff;
}

.button_container span {
  background: #0087cc;
  border: none;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  transition: all 0.35s ease;
  cursor: pointer;
}

.button_container span:nth-of-type(2) {
  top: 10px;
}

.button_container span:nth-of-type(3) {
  top: 20px;
}

.overlay5 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s, width 0.35s;
  z-index: 50;
}

.overlay5:before {
  content: '';
  background: black;
  left: -55%;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  transition: left 0.35s ease;
}

.overlay5:after {
  content: '';
  background: black;
  right: -55%;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  transition: all 0.35s ease;
}

.overlay5.open {
  visibility: visible;
  height: 100%;
}

.overlay5.open:before {
  left: 0;
}

.overlay5.open:after {
  right: 0;
}

.overlay5.open li {
  animation: fadeInRight 0.5s ease forwards;
  animation-delay: 0.35s;
}

.overlay5.open li:nth-of-type(2) {
  animation-delay: 0.45s;
}

.overlay5.open li:nth-of-type(3) {
  animation-delay: 0.55s;
}

.overlay5.open li:nth-of-type(4) {
  animation-delay: 0.65s;
}

.overlay5 nav {
  position: relative;
  height: 70%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  font-family: 'Nova';
  font-weight: 400;
  text-align: center;
  z-index: 100;
}

.overlay5 ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}

.overlay5 ul li {
  display: block;
  height: 25%;
  height: calc(100% / 4);
  min-height: 50px;
  position: relative;
  opacity: 0;
}

.overlay5 ul li a {
  display: block;
  position: relative;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
}

.overlay5 ul li a:hover:after,
.overlay5 ul li a:focus:after,
.overlay5 ul li a:active:after {
  width: 100%;
}

.overlay5 ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  background: #fff;
  transition: 0.35s;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

.header-logo {
  display: inline-block;
  position: absolute;
  margin: 0;
  padding-left: 10rem;
  left: 10px;
  top: 10%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 501;
}

@media only screen and (min-width: 200px) and (max-width: 670px) {
  .header-logo {
    padding: 11rem;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://wallpapersite.com/images/pages/pic_w/17158.jpg">
<div class="header-logo">

  <div class="sign">

    <span class="fast-flicker">C</span>ode<span class="flicker">f</span>is<span class="fast-flicker">hh</span>

  </div>

</div>


<div class="button_container" id="toggle">
  <span class="top"></span>
  <span class="middle"></span>
  <span class="bottom"></span>
</div>

<div class="overlay5" id="overlay5">
  <nav class="overlay-menu">
    <ul>
      <li><a class="myClass smoothscroll1" href="#">Home</a></li>
      <li><a class="myClass smoothscroll2" href="#about">About</a></li>
      <li><a class="myClass smoothscroll3" href="#">Work</a></li>
      <li><a class="myClass smoothscroll4" href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>

Answer 3

$("#header-logo").css("display","none")你也可以切换显示

Answer 4

试试 $(".sign").hide();和 $(".sign").show() 方法。

$('#toggle').click(function() {
  $(this).toggleClass('active');
  $('#overlay5').toggleClass('open');
  $(".sign").hide();
});
$('a.myClass').click(function() {
  $('#toggle').toggleClass('active');
  $('#overlay5').toggleClass('open');
  $(".sign").show();
});

@font-face {
  font-family: "LIBRARY 3 AM";
  src: url("Library3am-5V3Z.otf");
  src: url("Library3am-5V3Z.otf") format("opentype"),
}

body {
  background-color: black;
  background-image: repeating-linear-gradient(to bottom, transparent 7px, rgba(0, 0, 0, 0.8) 9px, rgba(0, 0, 0, 0.8) 13px, transparent 13px);
  background-size: 58px 58px;
  background-position: 0 2px, 4px 35px, 29px 31px, 34px 6px
}

.sign {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'LIBRARY 3 AM';
  width: 50%;
  height: 50%;
  background-image: radial-gradient(ellipse 50% 35% at 50% 50%, , transparent);
  transform: translate(-50%, -50%);
  letter-spacing: 2;
  left: 50%;
  top: 50%;
  font-size: 1.7em;
  color: #39b54a;
  text-shadow: 0 0 5px, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
  animation: shine 2s forwards, flicker 3s infinite
}

@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    font-family: 'LIBRARY 3 AM';
    text-shadow: 0 0 5px #39b54a, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
    color: #32cd32
  }
  28%,
  33% {
    color: #32cd32;
    text-shadow: none
  }
  82%,
  97% {
    color: #32cd32;
    text-shadow: none
  }
}

.flicker {
  animation: shine 2s forwards, blink 3s 2s infinite;
  font-family: 'LIBRARY 3 AM'
}

.fast-flicker {
  animation: shine 2s forwards, blink 10s 1s infinite;
  font-family: 'LIBRARY 3 AM'
}

@keyframes shine {
  0% {
    color: #32cd32;
    text-shadow: none
  }
  100% {
    text-shadow: 0 0 5px #39b54a, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
    color: #32cd32
  }
}

@keyframes flicker {
  from {
    opacity: 1
  }
  4% {
    opacity: .9
  }
  6% {
    opacity: .85
  }
  8% {
    opacity: .95
  }
  10% {
    opacity: .9
  }
  11% {
    opacity: .922
  }
  12% {
    opacity: .9
  }
  14% {
    opacity: .95
  }
  16% {
    opacity: .98
  }
  17% {
    opacity: .9
  }
  19% {
    opacity: .93
  }
  20% {
    opacity: .99
  }
  24% {
    opacity: 1
  }
  26% {
    opacity: .94
  }
  28% {
    opacity: .98
  }
  37% {
    opacity: .93
  }
  38% {
    opacity: .5
  }
  39% {
    opacity: .96
  }
  42% {
    opacity: 1
  }
  44% {
    opacity: .97
  }
  46% {
    opacity: .94
  }
  56% {
    opacity: .9
  }
  58% {
    opacity: .9
  }
  60% {
    opacity: .99
  }
  68% {
    opacity: 1
  }
  70% {
    opacity: .9
  }
  72% {
    opacity: .95
  }
  93% {
    opacity: .93
  }
  95% {
    opacity: .95
  }
  97% {
    opacity: .93
  }
  to {
    opacity: 1
  }
}

@-webkit-keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none
  }
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    text-shadow: 0 0 5px #39b54a, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
    color: #32cd32
  }
}

@keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none
  }
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    text-shadow: 0 0 5px #39b54a, 0 0 15px #39b54a, 0 0 20px #39b54a, 0 0 40px #39b54a, 0 0 60px #32cd32, 0 0 10px #32cd32, 0 0 98px #32cd32;
    color: #32cd32
  }
}


.button_container {
     position: fixed;
     top: 5%;
     right: 2%;
     height: 27px;
     width: 35px;
     cursor: pointer;
     z-index: 100;
     transition: opacity 0.25s ease;
}
 .button_container:hover {
     opacity: 0.7;
}
 .button_container.active .top {
     transform: translateY(10px) translateX(0) rotate(45deg);
     background: #fff;
}
 .button_container.active .middle {
     opacity: 0;
     background: #fff;
}
 .button_container.active .bottom {
     transform: translateY(-10px) translateX(0) rotate(-45deg);
     background: #fff;
}
 .button_container span {
     background: #0087cc;
     border: none;
     height: 5px;
     width: 100%;
     position: absolute;
     top: 0px;
     left: 0;
     transition: all 0.35s ease;
     cursor: pointer;
}
 .button_container span:nth-of-type(2) {
     top: 10px;
}
 .button_container span:nth-of-type(3) {
     top: 20px;
}
 .overlay5 {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     
     visibility: hidden;
     transition: opacity 0.35s, visibility 0.35s, width 0.35s;
     z-index: 50;
}
 .overlay5:before {
     content: '';
     background: black;
     left: -55%;
     top: 0;
     width: 50%;
     height: 100%;
     position: absolute;
     transition: left 0.35s ease;
}
 .overlay5:after {
     content: '';
     background: black;
     right: -55%;
     top: 0;
     width: 50%;
     height: 100%;
     position: absolute;
     transition: all 0.35s ease;
}
 .overlay5.open {
     
     visibility: visible;
     height: 100%;
}
 .overlay5.open:before {
     left: 0;
}
 .overlay5.open:after {
     right: 0;
}
 .overlay5.open li {
     animation: fadeInRight 0.5s ease forwards;
     animation-delay: 0.35s;
}
 .overlay5.open li:nth-of-type(2) {
     animation-delay: 0.45s;
}
 .overlay5.open li:nth-of-type(3) {
     animation-delay: 0.55s;
}
 .overlay5.open li:nth-of-type(4) {
     animation-delay: 0.65s;
}
 .overlay5 nav {
     position: relative;
     height: 70%;
     top: 50%;
     transform: translateY(-50%);
     font-size: 30px;
     font-family: 'Nova';
     font-weight: 400;
     text-align: center;
     z-index: 100;
}
 .overlay5 ul {
     list-style: none;
     padding: 0;
     margin: 0 auto;
     display: inline-block;
     position: relative;
     height: 100%;
}
 .overlay5 ul li {
     display: block;
     height: 25%;
     height: calc(100% / 4);
     min-height: 50px;
     position: relative;
     opacity: 0;
}
 .overlay5 ul li a {
     display: block;
     position: relative;
     color: #fff;
     text-decoration: none;
     overflow: hidden;
}
 .overlay5 ul li a:hover:after, .overlay5 ul li a:focus:after, .overlay5 ul li a:active:after {
     width: 100%;
}
 .overlay5 ul li a:after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     width: 0%;
     transform: translateX(-50%);
     height: 3px;
     background: #fff;
     transition: 0.35s;
}
 @keyframes fadeInRight {
     0% {
         opacity: 0;
         left: 20%;
    }
     100% {
         opacity: 1;
         left: 0;
    }
}

.header-logo {

    display: inline-block;

    position: absolute;

    margin: 0;

    padding-left: 10rem;

    left: 10px;

    top: 10%;

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    z-index: 501;

}



@media only screen and (min-width: 200px) and (max-width: 670px) {

    .header-logo {

        padding: 11rem;

    }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://wallpapersite.com/images/pages/pic_w/17158.jpg">
<div class="header-logo">

  <div class="sign">

    <span class="fast-flicker">C</span>ode<span class="flicker">f</span>is<span class="fast-flicker">hh</span>

  </div>

</div>


<div class="button_container" id="toggle">
  <span class="top"></span>
  <span class="middle"></span>
  <span class="bottom"></span>
</div>

<div class="overlay5" id="overlay5">
  <nav class="overlay-menu">
    <ul>
      <li><a class="myClass smoothscroll1" href="#">Home</a></li>
      <li><a class="myClass smoothscroll2" href="#about">About</a></li>
      <li><a class="myClass smoothscroll3" href="#">Work</a></li>
      <li><a class="myClass smoothscroll4" href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>

在事件中隐藏元素

Hide element on an event

html

javascript

css

navigation

jquery