How to close the menu by clicking on the links?

Question

Good morning, for the mobile menu of my site, I made this template:

The site is one page, and when I click on "contacts", the page goes down, but the menu remains open... How I do for when click on any menu item, the menu be closed?

I made the menu work with this JS code:

$(".btn-menu").click(function() {
  $(".menu").show();
});
$(".btn-close").click(function() {
  $(".menu").hide();
});

$(".fotodomenuz").click(function() {
  $(".menu").show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<button class="btn-menu"> <i class="fa fa-bars fa-2x" aria-hidden="true"></i> </button>
<div class="menu">
  <a class="btn-close"><img src="botao/bottom.png" alt="Botão fechar"></a>

  <ul id="menuesquerda">
    <a href="#ancora" class="scroll">
      <li id="home">Home</li>
    </a>
    <a href="#seusite" class="scroll">
      <li>Portfólio</li>
    </a>
  </ul>
  <ul id="menudireita">
    <a href="pages/biografia.html">
      <li id="bio">Biografia</li>
    </a>
    <a href="#footer" class="scroll">
      <li>Contatos</li>
    </a>
  </ul>
</div>

Answer 1

Congratulations on your success, but I invite you to improve your code with the suggestion below:

//eventos do botão principal e mudar imagem ao fechar
$(".btn-menu").click(function(e) {
  //como estamos falando de um botão, é importante desativar os eventos padrões
  e.preventDefault();
  //o toggle usa o hide e show para inverter o estado atual
  $(".menu").toggle();
  //se o menu está visível, o próprio botão do menu se transforma em fechar, dispensando o elemento adicional "btn-close
  changeMenuIcon();
})

//caso o mesmo item tenha mais de 1 ocorrência, adicione classes para facilitar a manipulação
$('.menuItens').on('click', function(e) {
  $('.menu').hide();
  changeMenuIcon();
})

//funcção para alterar o ícone do menu entre aberto e fechado
function changeMenuIcon() {
if($(".menu").is(":visible")) {
  $(".btn-menu").html('<i class="fa fa-close " ></i>'); 
  }
  else {
   $(".btn-menu").html('<i class="fa fa-bars fa-2x" aria-hidden="true"></i>');
  }
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn-menu"> <i class="fa fa-bars fa-2x" aria-hidden="true"></i> </button>
    <!-- o menu precisa começar invisível -->
    <div class="menu" style="display:none;">
    <ul id="menuesquerda" class="menuItens">
        <a href="#ancora" class="scroll"><li id="home">Home</li></a>
        <a href="#seusite" class="scroll"><li>Portfólio</li></a>
    </ul>
    <ul id="menudireita" class="menuItens">
        <a href="pages/biografia.html"><li id="bio">Biografia</li></a>
        <a href="#footer" class="scroll"><li>Contatos</li></a>          
    </ul>
    </div>

And finally, consider using camelCase for your code to read better, for example, "menudireito" will become "menuDireito"; thank you

Answer 2

Guys, I was able to do... This was my menu

<button class="btn-menu"> <i class="fa fa-bars fa-2x" aria-hidden="true"></i> </button>
    <div class="menu">
    <a class="btn-close"><img src="botao/bottom.png" alt="Botão fechar"></a>

    <ul id="menuesquerda">
        <a href="#ancora" class="scroll"><li id="home">Home</li></a>
        <a href="#seusite" class="scroll"><li>Portfólio</li></a>
    </ul>
    <ul id="menudireita">
        <a href="pages/biografia.html"><li id="bio">Biografia</li></a>
        <a href="#footer" class="scroll"><li>Contatos</li></a>          
    </ul>

.

$(".btn-menu").click(function(){
$(".menu").show();
});
$(".btn-close").click(function(){
$(".menu").hide();
});

$(".fotodomenuz").click(function(){
$(".menu").show();
});

Just put this code down in my js file.

$('#menuesquerda a').click(function(){ $('.menu').hide(); });
$('#menudireita a').click(function(){ $('.menu').hide(); });