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.