Full screen overlay menu toggle

I want to create a full screen overlay menu. I am not able to close the menu on anchor click eg. if we click on Home. It scrolls down to the section but does not close the overlay. I have tried adding some jquery but I am not able to do it. I have tried to toggle the menus as done on clicking the cross but no success.

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

$(".fulloverlay a").on("click", function() {
  $('#toggle').toggleClass('active');
  $('#overlay').toggleClass('open');
});

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 40%;
  left: 0;
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
}
.container p {
  font-size: 20px;
}
.container a {
  display: inline-block;
  position: relative;
  text-align: center;
  color: #FF5252;
  text-decoration: none;
  font-size: 20px;
  overflow: hidden;
  top: 5px;
}
.container a:after {
  content: '';
  position: absolute;
  background: #FF5252;
  height: 2px;
  width: 0%;
  transform: translateX(-50%);
  left: 50%;
  bottom: 0;
  transition: 0.35s ease;
}
.container a:hover:after {
  width: 100%;
}

h1 {
  position: relative;
  text-align: center;
  font-family: 'Vollkorn', sans-serif;
}

.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: #FF5252;
  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;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s, width 0.35s;
  z-index: 50;
}
.overlay:before {
  content: '';
  background: #FF5252;
  left: -55%;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  transition: left 0.35s ease;
}
.overlay:after {
  content: '';
  background: #FF5252;
  right: -55%;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  transition: all 0.35s ease;
}
.overlay.open {
  opacity: 0.9;
  visibility: visible;
  height: 100%;
}
.overlay.open:before {
  left: 0;
}
.overlay.open:after {
  right: 0;
}
.overlay.open li {
  -webkit-animation: fadeInRight 0.5s ease forwards;
          animation: fadeInRight 0.5s ease forwards;
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: 0.55s;
          animation-delay: 0.55s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
}
.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  font-family: 'Vollkorn', serif;
  font-weight: 400;
  text-align: center;
  z-index: 100;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 4);
  min-height: 50px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
}
.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  transition: 0.35s;
}

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body translate='no' >
  <div class='container'>
  <h1>Top right corner, click it!</h1>
</div>

<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' id="fulloverlay">
    <ul>
      <li><a href='#about2' >Home</a></li>
      <li><a href='#'>About</a></li>
      <li><a href='#'>Work</a></li>
      <li><a href='#'>Contact</a></li>
    </ul>
  </nav>
</div>

<section class="about" id="about" style="background-color: white; height: 100vh;"></section>
<section class="about2" id="about2" style="background-color:aqua; height: 100vh;"></section>

Answer

I tried this code on my side and noticed one small change would work in this case.

You are selecting anchors(a) using wrong selector. As ‘fulloverlay’ is the Id of the parent nav element so instead of selecting it like:

 $(".fulloverlay a").on("click", function() {
   $('#toggle').toggleClass('active');
   $('#overlay').toggleClass('open');
});

You can write like this:

$("#fulloverlay a").on("click", function() {
   $('#toggle').toggleClass('active');
   $('#overlay').toggleClass('open');
});

then it works.

Advertisement

Answer