0

Bom dia, para o menu mobile do meu site, eu fiz deste modelo:

foto 01

O site é one page, e quando eu clico em "contatos", a pagina desce, porem o menu continua aberto... Como eu faço para quando clicar em qualquer item do menu, o menu ser fechado?

Fiz o menu funcionar com este código JS:

$(".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>

4
  • É impossível dar uma resposta exata sem um exemplo mínimo, completo e verificável. Mas creio que basta esconder o menu no evento de clique de alguma das opções 26/12/2017 às 12:22
  • eu só preciso que ao clicar no 'home','portfolio''biografia' etc... o menu fechar... sem precisar no "X"
    – user96296
    26/12/2017 às 12:27
  • Que tal <a href="#ancora" onclick="myFunction()">Ancora</a> e display:none no CSS?
    – hugocsl
    26/12/2017 às 12:29
  • Edite a pergunta e inclua o html por gentileza 26/12/2017 às 12:37

2 Respostas 2

1

Parabéns por ter conseguido, mas convido você a melhorar seu código com a sugestão abaixo:

//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>

E para finalizer, considere o uso do camelCase para seu código ter melhor leitura, por exemplo, "menudireito" se tornará "menuDireito"; obrigado

0

Galera, consegui fazer... Este era meu 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();
});

Foi só colocar este código abaixo, no meu arquivo js.

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

Você deve fazer log-in para responder a esta pergunta.