Closing nav menu after clicking list item (javascript, css, html)

Question

I built a navigation menu for mobile user. I want the menu to close as soon as i click on a list item. How is that possible?

 $(document).ready(function() { $('.menu-toggle').click(function() { $('header nav').toggleClass('active'); }); });

 header { display: block; left: 0px; border-radius: 0px; width: 100%; height: 50px; margin-left: 0px; margin-right: 0px; margin-top: 0px; top: 0; right: 0; background: white; z-index: 2; } header nav { position: fixed; width: 100%; height: calc(100vh - 50px); background-color: #ffffff; top: 50px; left: 0; transition: 0.5s; } header nav.active { left: -100%; } header nav ul li { float: none; display: block; padding-bottom: 15px; text-align: center; font-size: 25px; font-family: 'Roboto', sans-serif; font-weight: lighter; } header nav ul li a { font-size: 25px; } header nav ul a li:hover { padding-top: 0px; color: #3ECB8A; }.menu-toggle { display: block; margin-right: 15px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header> <nav id="main-nav" class="active"> <ul> <a href="#"> <li>Home</li> </a> <a href="#about"> <li>About</li> </a> <a href="#work"> <li>Work</li> </a> <a href="#contact"> <li>Contact</li> </a> </ul> </nav> <div class="menu-toggle"> <i class="fa fa-bars">icon</i> </div> </header>

Answer 1

You can listen for a click on a link and toggle the active class as you are doing to show/hide the menu. For example:

$('header nav a').click(function(){
    $('header nav').toggleClass('active');
  })