Skip to main content
3 de 3
explicação sobre fechamento da tag BODY não estava exigindo a mesma.
ElvisP
  • 1,5mil
  • 1
  • 16
  • 44

No seu HTML:

<input type="checkbox" id="toggle"/>

Altera para:

<input type="checkbox" id="toggle" onclick="meuMenuToggle()"/>

E no HTML

<div class="All">

Altera para:

<div class="All" id="divAll">

E insere o código do javascript abaixo do seu conteúdo HTML antes de < /body >

<script>
function meuMenuToggle() {
  var x = document.getElementById("divAll");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

Assim quando você clicar no menu, o conteúdo será oculto, e ao clicar no menu para fechar, o conteúdo será descoberto.

Entendendo: a função javascript meuMenuToggle(); verifica se não existe e é verdadeiro o estilo display='none'; se é TRUE, a função insere o estilo na DIV que foi identificada na variável 'x' através do ID do elemento pego ("divAll"), na alteração sugerida acima (< div class='All' id='divAll' >).

O evento de abrir o mouse alterna a DIV para display none, e alterna para display block quando clica novamente no menu.

ElvisP
  • 1,5mil
  • 1
  • 16
  • 44