Navigation Menu Doesn't Close

Question

I came across a code of a navigation menu. The problem with this navigation menu is that when I click on any of the menu-items, the menu successfully takes us to the desired link but does not close itself. This is an overlay navigation menu. For questions related to this post please comment. And THANKS IN ADVANCE!!

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

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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="smoothscroll1" href="#">Home</a></li> <li><a class="smoothscroll2" href="#about">About</a></li> <li><a class="smoothscroll3" href="#work">Work</a></li> <li><a class="smoothscroll4" href="#contact">Contact</a></li> </ul> </nav> </div>

Answer 1

You don't have any code that tells the nav to hide. I added this to your js:

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

A better way to do this would be to add a class to all of the nav-based <a> tags and select that class instead of the <a> tag because you might have other <a> tags in other sections of your project.

So that might look like this:

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

And then your html might look like this:

   <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">Work</a></li>
   <li><a class="myClass smoothscroll4" href="#contact">Contact</a></li>

Here is a working snippet showing the simplified, <a> tag selection version:

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

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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="smoothscroll1" href="#">Home</a></li> <li><a class="smoothscroll2" href="#about">About</a></li> <li><a class="smoothscroll3" href="#work">Work</a></li> <li><a class="smoothscroll4" href="#contact">Contact</a></li> </ul> </nav> </div>

And here is the more flexible, class-based version:

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

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <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">Work</a></li> <li><a class="myClass smoothscroll4" href="#contact">Contact</a></li> </ul> </nav> </div>