How to make a menu appear and hide it?

Question

How to make the menu appear and hide? I’m not getting it.

Code:

let close = document.querySelector('.btn-menu')

close.addEventListener('click', function() {
  var menu = document.querySelector('.menu')
  if (menu.style.display == 'none') {
    menu.style.display = 'show'
  }
})

.menu {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.9);
  top: 0;
  left: 0;
}

<header class="cabecalho">
    <a href="index.html">
      <h1 class="logo">NodeProp - Especializado em Soluções Digitais</h1>
      <button class="btn-menu"><i class="fas fa-bars fa-lg"></i></button>
    </a>
    <nav class="menu">
      <a  class="btn-close">x</a>
      <ul>
        <li><a>Home</a></li>
        <li><a>Cursos</a></li>
        <li><a>Sites</a></li>
        <li><a>Jobs</a></li>
        <li><a>Blog</a></li>
        <li><a>Publi</a></li>
      </ul>
    </nav>
</header>

Answer 1

First of all, there is no display: show in the CSS. As pointed out in comments, the ideal in this case is to use display: block as opposite at the display: none, in order to display the menu.

The block is ideal in this case since it is the standard for the property display for elements <nav>.

Another problem is that the close button is within anchor (<a>). Thus, although the Handler Javascript event is properly executed by clicking the button, the user will be redirected to the href link, which is obviously not the desired action.

Fixing these problems (and with some other changes), we have:

let open = document.querySelector('.btn-menu');
let close = document.querySelector('.btn-close');
let menu = document.querySelector('.menu');

open.addEventListener('click', function() {
  menu.style.display = 'block';
});

close.addEventListener('click', function() {
  menu.style.display = 'none';
});

.menu {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.9);
  top: 0;
  left: 0;
  color: #fff;
}

<header class="cabecalho">
  <h1 class="logo">
    <a href="index.html">NodeProp - Especializado em Soluções Digitais</a>
  </h1>
  
  <!-- Note que agora o botão de fechar está fora do link. -->
  <button class="btn-menu"><i class="fas fa-bars fa-lg"></i></button>
  
  <nav class="menu">
    <a  class="btn-close">x</a>
    <ul>
      <li><a>Home</a></li>
      <li><a>Cursos</a></li>
      <li><a>Sites</a></li>
      <li><a>Jobs</a></li>
      <li><a>Blog</a></li>
      <li><a>Publi</a></li>
    </ul>
  </nav>
</header>

But I made some changes:

1. Since there are two separate buttons (one to open and one to close), there is of course no need to use a if, since the button to open at all times will cause the menu to be shown and to close, at all times will cause the menu to be hidden.

2. I removed the <h1> from within the <a> and put the <a> within the <h1> (wintered the nesting). I did it because the element <a> was made to accept within itself only inline elements (and the <h1> is not inline). Learn more about this Soen question.

3. I added a semicolon at the end of each statement. It may sound "fresh" and I know that Javascript "accepts" the semicolon and "works" code, but it avoids some bizarre situations that can occur if you don’t use them, like this and this (see more about this here).

But if you want, you can add a single Handler both buttons and check with the if. Thus:

let btns = document.querySelectorAll('.btn-menu, .btn-close');
let menu = document.querySelector('.menu');

// Como agora temos uma lista de elementos, precisamos de usar o `forEach`
// para adicionar o listener de evento a cada um deles.
btns.forEach((btn) => btn.addEventListener('click', () => {
  if (menu.style.display !== 'block') {
    menu.style.display = 'block';
  } else {
    menu.style.display = 'none';
  }
}));

.menu {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.9);
  top: 0;
  left: 0;
  color: #fff;
}

<header class="cabecalho">
  <h1 class="logo">
    <a href="index.html">NodeProp - Especializado em Soluções Digitais</a>
  </h1>
  
  <!-- Note que agora o botão de fechar está fora do link. -->
  <button class="btn-menu"><i class="fas fa-bars fa-lg"></i></button>
  
  <nav class="menu">
    <a  class="btn-close">x</a>
    <ul>
      <li><a>Home</a></li>
      <li><a>Cursos</a></li>
      <li><a>Sites</a></li>
      <li><a>Jobs</a></li>
      <li><a>Blog</a></li>
      <li><a>Publi</a></li>
    </ul>
  </nav>
</header>