Menu Design Responsive

Question

Regards!!!!

I have been trouble to my design responsive, each references working perfectly, but the menu stays open when I enter any menu option, like this:

so, I want when I enter any menu option, it closes automatically.

this is the code:

$(document).ready(main);

var contador = 1;

function main() {
  $('.menu_bar').click(function() {

    if (contador == 1) {
      $('nav').animate({
        left: '0'
      });
      contador = 0;
    } else {
      contador = 1;
      $('nav').animate({
        left: '-100%'
      });
    };

  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<style>
  @media screen and (max-width:800px) {
    header nav {
      width: 80%;
      height: 100%;
      margin: 0;
      position: fixed;
      left: -100%;
      overflow: auto;
    }
    .menu_bar {
      display: block;
      width: 100%;
      background: #ccc;
    }
    .menu_bar .bt-menu {
      display: block;
      padding: 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: #024959;
      overflow: hidden;
      font-size: 25px;
      font-weight: bold;
      color: #fff;
      text-decoration: none;
    }
    .menu_bar span {
      float: right;
      font-size: 40px;
    }
    header nav ul li {
      display: block;
      float: none;
      border-bottom: 1px solid rgba(255, 255, 255, .3);
    }
  }
</style>

<header>
  <div class="menu_bar">
    <a href="#" class="bt-menu"><span class="icon-list2"></span>Menu</a>
  </div>

  <nav>
    <ul>
      <li><a href="#"><span class="icon-house"></span>Inicio</a></li>
      <li><a href="#"><span class="icon-suitcase"></span>Trabajos</a></li>
      <li><a href="#"><span class="icon-rocket"></span>Proyectos</a></li>
      <li><a href="#"><span class="icon-earth"></span>Servicios</a></li>
      <li><a href="#"><span class="icon-mail"></span>Contactos</a></li>
    </ul>
  </nav>
</header>

so, it's happening, the menu responsive is working, each href of each one menu's option are to the same page, I mean, I have an only page "index.html" and each of the menu options, these refer to an "Id" specific, so what I have to do? for that so that when you click on any menu option, it locates the clicked option and the menu closes automatically.

Answer 1

You are only listening to the click event on '.menu_bar'. You should add an event listener to the items on the menu and then handle the event, in your case, hide the menu.

$(document).ready(main);

var contador = 1;

function main() {
  $('.menu_bar').click(function() {

    if (contador == 1) {
      $('nav').animate({
        left: '0'
      });
      contador = 0;
    } else {
      contador = 1;
      $('nav').animate({
        left: '-100%'
      });
    };

  });
    $('.menu-link').click(function() {
        contador = 1;
        $('nav').animate({  left: '-100%' });
    });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<style>
  @media screen and (max-width:800px) {
    header nav {
      width: 80%;
      height: 100%;
      margin: 0;
      position: fixed;
      left: -100%;
      overflow: auto;
    }
    .menu_bar {
      display: block;
      width: 100%;
      background: #ccc;
    }
    .menu_bar .bt-menu {
      display: block;
      padding: 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: #024959;
      overflow: hidden;
      font-size: 25px;
      font-weight: bold;
      color: #fff;
      text-decoration: none;
    }
    .menu_bar span {
      float: right;
      font-size: 40px;
    }
    header nav ul li {
      display: block;
      float: none;
      border-bottom: 1px solid rgba(255, 255, 255, .3);
    }
  }
</style>

<header>
  <div class="menu_bar">
    <a href="#" class="bt-menu"><span class="icon-list2"></span>Menu</a>
  </div>

  <nav>
    <ul>
      <li><a class="menu-link" href="#"><span class="icon-house"></span>Inicio</a></li>
      <li><a class="menu-link" href="#"><span class="icon-suitcase"></span>Trabajos</a></li>
      <li><a class="menu-link" href="#"><span class="icon-rocket"></span>Proyectos</a></li>
      <li><a class="menu-link" href="#"><span class="icon-earth"></span>Servicios</a></li>
      <li><a class="menu-link" href="#"><span class="icon-mail"></span>Contactos</a></li>
    </ul>
  </nav>
</header>