Hide navbar when item is clicked

Question

Hide navbar when item is clicked

Navigation

#1 by (1 votes)
#2 by (-1 votes)

1

I'm developing a site whose menu is navbar with dropdown of bootstrap 4. When I view the site on a smaller screen, the nav is replaced by the button burger and is only "activated" when this button is clicked. However, I want it to be "disabled" when any menu item is clicked. For example, if I click on "Contact", in addition to the screen scroll to the contact part, I want the menu to go up and just the button up there.

<header>
  <nav id="menu" class="navbar navbar-expand-lg">
    <img id="icone" src="imgs/logoBranca.png" height="35" alt="Logo da Clara Quitutes & Cia">
    <a id="nome" class="navbar-brand" href="#">Clara Quitutes & Cia</a>
    <button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav justify-content-end">
        <li class="nav-item">
          <a class="nav-link active" href="#inicio">Início</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Serviços</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="servicos.html#bolos">Bolos</a>
            <a class="dropdown-item" href="servicos.html#salgados">Salgados</a>
            <a class="dropdown-item" href="servicos.html#bebidas">Bebidas</a>
            <a class="dropdown-item" href="servicos.html#docinhos">Docinhos</a>
            <a class="dropdown-item" href="servicos.html#quitutes">Quitutes</a>
            <a class="dropdown-item" href="servicos.html#empratados">Empratados</a>
            <a class="dropdown-item" href="servicos.html#opcoes-saudaveis">Opções Saudáveis</a>
            <a class="dropdown-item" href="#">Garçonete/Copeira</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contato">Contato</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sobre">Sobre</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

I tried to use this function in JS (I found it in GitHub), but it did not work. What's wrong with the code?

//Função para o menu subir quando um item for clicado
  $(document).ready(function(){
    $(".navbar-nav li.-collapse a").click(function(event){
      $(".navbar-collapse").collapse('hide');
    });
  });

Is there any other way I can do this? I'm not using jQuery in the project and would not like to use it just because it's too heavy, so preferably the solution suggestion might be developed in JS or even CSS. I want the following:

Menu without clicks

MenuwhenIclickontheburger

So,whenIclickonaniteminthelist(inthiscase,"home", "users" or "places"), the menu looks like this:

javascript css twitter-bootstrap nav-bar

asked by anonymous 17.08.2018 / 23:38

2 answers

-1

To hide you can use the following code '

$('id ou class do navbar').hide()

'

17.08.2018 / 23:44

How do I check a login with sqlite3 + Python3? ACL doubts with node.js!

score 1 · Accepted Answer

Just trigger a .click() trigger on the burger button when a link is clicked, except that it has only a # in href , since this link opens a dropdown submenu, it is not an anchor (eg link "Services").

For this you select all menu links, EXCEPT what only has # in href using pseudo-class :not , and creates a click event for each. Clicking on any of them will trigger the .click() trigger on the button, making the menu close:

document.addEventListener("DOMContentLoaded", function(){
   var links = document.querySelectorAll(".navbar-nav li a:not([href='#'])");
   for(var x=0; x<links.length; x++){
      links[x].onclick = function(){
         document.querySelector("button.navbar-toggler").click();
      }
   }
});

Example:

document.addEventListener("DOMContentLoaded", function(){
   var links = document.querySelectorAll(".navbar-nav li a:not([href='#'])");
   for(var x=0; x<links.length; x++){
      links[x].onclick = function(){
         document.querySelector("button.navbar-toggler").click();
      }
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<header>
  Abra o menu e clique, por exemplo, em "Contato":
  <nav id="menu" class="navbar navbar-expand-lg navbar-light">
    <a id="nome" class="navbar-brand" href="#">Clara Quitutes & Cia</a>
    <button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav justify-content-end">
        <li class="nav-item">
          <a class="nav-link active" href="#inicio">Início</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Serviços</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="servicos.html#bolos">Bolos</a>
            <a class="dropdown-item" href="servicos.html#salgados">Salgados</a>
            <a class="dropdown-item" href="servicos.html#bebidas">Bebidas</a>
            <a class="dropdown-item" href="servicos.html#docinhos">Docinhos</a>
            <a class="dropdown-item" href="servicos.html#quitutes">Quitutes</a>
            <a class="dropdown-item" href="servicos.html#empratados">Empratados</a>
            <a class="dropdown-item" href="servicos.html#opcoes-saudaveis">Opções Saudáveis</a>
            <a class="dropdown-item" href="#">Garçonete/Copeira</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contato">Contato</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sobre">Sobre</a>
        </li>
      </ul>
    </div>
  </nav>
</header>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="contato">
   contato
</div>

Now, your jQuery does not work because your selector is incorrect:

".navbar-nav li.-collapse a"

Should be:

".navbar-nav li a"