Making navigation overlay disappear when pages clicked - html

Question

Im using a CSS navigation overlay menu, code below
When you click on the navigation menu and select which page you want to go to the overlay stays and does not disappear..
If i link it to another html page it works fine, but as i have all my pages on one page i'm linking it through href to a div like (href="#about")
Any idea how i can make the overlay menu hide once you click on your navigation pages?
Any help much appreciated, thank you
<nav id="menu">
<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" for="toggle-nav"></label>
<div class="box">
<ul>
<li>About</li>
<li>Services</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</nav>
a { text-decoration: none; }
a:hover { text-decoration: underline; }
li { list-style: none; }
#menu .box {
position: fixed;
text-align: center;
overflow: hidden;
z-index: -1;
opacity: 0;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#menu ul {
position: relative;
top: 20%;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#menu li {
margin: 60px;
}
#menu li a {
border-radius: 3px;
padding: 15px;
border: 1px solid transparent;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
color: #fff;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#menu li a:hover { border-color: #fff; }
#menu li a i {
margin-right: 5px;
font-size: 24px;
}
#toggle-nav-label {
color: black;
text-align: center;
line-height: 30px;
font-size: 30px;
display: block;
cursor: pointer;
position: relative;
z-index: 500;
width: 30px;
height: 30px;
border-radius: 5px;
}
#toggle-nav { display: none; }
#toggle-nav:checked ~ .box {
opacity: 1;
z-index: 400;
}
#toggle-nav:checked ~ .box ul {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#toggle-nav:checked ~ #toggle-nav-label {
color: white;
position: fixed;
}

Answer 1

The easiest answer is to simply uncheck the checkbox using javascript ... but that kinda defeats the purpose of a checkbox hack doesn't it. I can't think of another way other than to simply make the user click the label again to close the menu. Kinda ruins the effect you're going for though. In case nothing better comes up here is a quick javascript solution:
window.onload = function() {
// Add a listener for any clicks on the menu
document.getElementById('menu').addEventListener('click', function(edit) {
var targetName = event.target.tagName;
// Make sure that the element being clicked is a link or an icon
if (targetName !== 'A' && targetName !== 'I') {
return;
}
// Uncheck the checkbox
document.getElementById('toggle-nav').checked = false;
});
}
And a codepen. If you want to allow the user to close the menu by clicking anywhere you could add && targetName !== 'DIV' to the if statement. Hope it helps, or that someone comes up with a better method, because personally, I'd love to find a way to do this with just CSS.
EDIT
Fixed JS code to use targetName. Added support for icons. Fixed codepen demo to match OP demo.
EDIT 2
Found a cross browser error. Fixed for Firefox by including event in the function parameters.