CSS menu needs to disappear with a click elsewhere - html

Question

I made a menu that appears when clicking a hamburger button with CSS and a checkbox. It works nicely so far. But now I want it to disappear when clicking elsewhere on the page, not only when clicking on the hamburger button again. How do I do that, please?
HTML:
<div class="navigatie">
<input class="nav-toggle" id="nav-toggle" type="checkbox">
<nav>
<ul>
<li>Home</li>
<li>Werkwijze</li>
<li>Over ons</li>
<li>Faq</li>
<li>Accreditatie</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span><i class="fas fa-bars"></i></span>
</label>
</div>
CSS:
.nav-toggle {
display: none;
}
nav {
position: absolute;
bottom: 100%;
left: 30%;
background-color: #f1f1f1;
width: 40%;
transform: scale(1,0);
transform-origin: bottom;
transition: transform 400ms ease-in-out;
}
nav a {
color: #65A624;
font-size: 1rem;
opacity: 0;
transition: opacity 150ms ease-in;
display: block;
}
nav a:hover:not(.active) {
background-color: #555;
color: white;
}
nav a.active {
background-color: #65A624;
color: white;
}
.nav-toggle:checked ~ nav {
transform: scale(1,1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
Greetings,
Sandra.

Answer 1

$(document).ready(function () {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$("button.navbar-toggle").click();
}
});
});
Check out this jsfiddle sample.
http://jsfiddle.net/52VtD/5718/

Answer 2

CSS Solution
If you want it purely CSS you can do the example below, I've edited a few things because your code missed some CSS and HTML to make it reproducible correctly. But the point should be clear. ;)
A overlay appears after opening, you can close the menu by clicking anywhere in the overlay (darker background)
Advice: use JavaScript
I would recommend however to make it easier and use JavaScript if that is a option.
.nav-toggle-label {
width: 3rem;
height: 3rem;
margin: 0;
display: block;
background-color: #0F0;
}
.nav-toggle {
width: 0.1rem;
height: 0.1rem;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
nav {
width: 40%;
position: absolute;
top: 0%;
left: 30%;
z-index: 110;
background-color: #f1f1f1;
transform: scale(1, 0);
transform-origin: bottom;
transition: transform 400ms ease-in-out;
}
nav a {
color: #65A624;
font-size: 1rem;
opacity: 0;
transition: opacity 150ms ease-in;
display: block;
}
nav a:hover:not(.active) {
background-color: #555;
color: white;
}
nav a.active {
background-color: #65A624;
color: white;
}
.nav-toggle:checked~.navigatie nav {
transform: scale(1, 1);
}
.nav-toggle:checked ~ .navigatie a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
.nav-toggle-close {
width: 100%;
height: 100%;
position: absolute;
top: 0%;
left: 0%;
background-color: rgba(0, 0, 0, 0.3);
display: none;
z-index: 100;
}
.nav-toggle:checked ~ .nav-toggle-close {
display: block;
}
<input class="nav-toggle" id="nav-toggle" type="checkbox">
<label for="nav-toggle" class="nav-toggle-close"></label>
<div class="navigatie">
<nav>
<ul>
<li>Home</li>
<li>Werkwijze</li>
<li>Over ons</li>
<li>Faq</li>
<li>Accreditatie</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span><i class="fas fa-bars">Menu</i></span>
</label>
</div>