css & html :checked property - html

Question

CSS:
nav a{
display: none;
}
#menubutton:checked, nav a{
display: block;
color: black;
text-decoration: none;
}
HTML:
<nav>
<img src="pictures/close.png" alt="Close" height="20" width="20">
<a class="navitem" id="firstnavitem" href="index.php">Home</a>
<a class="navitem" href="#">Test</a>
<a class="navitem" href="#">Test</a>
<a class="navitem" href="#">Test</a>
</nav>
I want that the HTML code isn't displayed until the #menubutton is :checked.
(The #menubutton is an invisible checkbox).
If the #menubutton is :checked I want, that the HTML code is displayed. The code that should be displayed is in the css "nav a{}".

Answer 1

Use the adjacent sibling selector +.
#menubutton {
display: none;
}
nav * {
display: none;
}
#menubutton:checked + nav * {
display: block;
color: black;
text-decoration: none;
}
#closeMenu {
height: 20px;
width: 20px;
}
<label for="menubutton">MenuButton</label>
<input type="checkbox" id="menubutton" />
<nav>
<label for="menubutton"><img src="pictures/close.png" alt="close menu" id="closeMenu" /></label>
<a class="navitem" id="firstnavitem" href="index.php">Home</a>
<a class="navitem" href="#">Test</a>
<a class="navitem" href="#">Test</a>
<a class="navitem" href="#">Test</a>
</nav>
If there are other elements in between your #menubutton and your nav element, you might need to make use of the general sibling selector ~ instead.

Answer 2

css
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
html
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>

Answer 3

This works with pure CSS and HTML using the :target psuedo class. It works as of IE 9. See MSDN for more info.
Watch out: the :target psuedo-class relies on the fragment (or hash) of the current URL, so it might mess up internal page navigation.
#menu {
display: none;
}
#menu:target {
display: block;
}
Menu
<nav id="menu">
Close |
<a class="navitem" id="firstnavitem" href="index.php">Home</a> |
<a class="navitem" href="#">Test</a> |
<a class="navitem" href="#">Test</a> |
<a class="navitem" href="#">Test</a>
</nav>