Unchecking a checkbox when clicking on an anchor (CSS only) - html

Question

I'm currently trying to do a sort of drop-down menu for the navbar of an app, in CSS, only.
My navbar, thanks to a checkbox, when checked, expands and when unchecked, hides itself with an animation, what is translated to the user as when he clicks anywhere on the navbar, it hides or expands itself. All the anchors in my navbar are linking to ids.
My problem is that, when I click on any link, the checkbox doesn't uncheck, so the navbar doesn't execute the "draw back" animation.
Here's the navbar what it looks like in html (jade-lang) :
header
input(type='checkbox')#btn
label(for='btn')#menu
nav
ul
li: a(href='#presentation') Accueil
And, to give just an idea of what looks like the css :
header input {
display: none;
}
#menu {
position: fixed;
left: 100%;
height: 100%;
width: 100%;
background-color: #333333;
font-weight: 500;
}
header input:checked + #menu {
-webkit-animation: showMenu 0.5s forwards;
animation: showMenu 0.5s forwards;
}
#-webkit-keyframes showMenu { from { left: 100%; } to { left: 0%; } }
#keyframes showMenu { from { left: 100%; } to { left: 0%; } }
header input + #menu {
-webkit-animation: hideMenu 0.5s forwards;
animation: hideMenu 0.5s forwards;
}
#-webkit-keyframes hideMenu { from { left: 0%; } to { left: 100%; } }
#keyframes hideMenu { from { left: 0%; } to { left: 100%; } }
Simple as that. But I don't get how to have the checkbox unchecking when clicking on any of the links of the navbar.
Thanks :).
EDIT I reworded my question.

Answer 1

You can not check/uncheck a checkbox using CSS, you'd need to use some JavaScript. As I understand the point of this excercise is to create a menu toggle type of button in pure CSS.
You can use :focus + * instead of :checked + *, so you'd need a focusable element, like <a>, to toggle the menu:
HTML:
Toggle menu
<nav id="menu">
Link<br>
Link 2
</nav>
** CSS **
#menu {
position: fixed;
left: 100%;
top:0;
width: 100%;
transition: left 300ms 300ms; /* note the additional transition delay */
}
a:focus + #menu {
left:0;
transition-delay:0;
}
Demo: http://jsfiddle.net/nt87koye/2/
This way the menu slides in when the link has focus, and slides out once the focus is lost (user clicks anywhere outside the link).
You could also use the :target pseudoclass and place <a href="#menu"> anywhere on the page, so the feature doesn't rely on specific markup, which is required with the adjacent sibling solution: http://jsfiddle.net/nt87koye/4/