O problema é que o seletor ~
se refere a um elemento que é precedido por outro dentro do mesmo "pai" da estrutura em árvore do arquivo, e não é o caso do seu HTML.
Da documentação do W3C:
8.3.2. General sibling combinator
The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.
(grifo meu, na parte que nos interessa)
Que em resumo é isto:
O combinador de "irmão genérico" é o "til" (~
), que separa duas sequências de seletores simples. Os elementos tem um pai em comum na árvore do documento, e o primeiro dos elementos precede o segundo, não necessariamente imediatamente.
No seu caso, o "pai" dos elementos é diferente, só o "avô" é o mesmo.
Tem muitas maneiras de se resolver, a melhor só depende do geral do seu código. O importante é entender como funcionam os seletores do CSS.
Exemplos de solução:
Uma solução seria por o nav
dentro da div
:
* {
margin: 0;
padding: 0;
list-style: none;
}
input:checked ~ nav {
display: none;
}
<body>
<header>
<div class="menu">
<input type="checkbox" />
<nav>
<ul>
<li><a href="#">INICIO</a></li>
<li><a href="#">SOBRE</a></li>
<li><a href="#">CONTATOS</a></li>
<li><a href="#">FALE CONOSCO</a></li>
<li><a href="#">PROJETOS</a></li>
</ul>
</nav>
</div>
</header>
</body>
Outra seria tirar o input
da div
:
* {
margin: 0;
padding: 0;
list-style: none;
}
input:checked ~ nav {
display: none;
}
<body>
<header>
<input type="checkbox" />
<nav>
<ul>
<li><a href="#">INICIO</a></li>
<li><a href="#">SOBRE</a></li>
<li><a href="#">CONTATOS</a></li>
<li><a href="#">FALE CONOSCO</a></li>
<li><a href="#">PROJETOS</a></li>
</ul>
</nav>
</header>
</body>
Mas se precisar mesmo de um elemento dentro da div:
Você pode usar um label
como "controle remoto" do checkbox:
* {
margin: 0;
padding: 0;
list-style: none;
}
#toggle,
input:checked ~ nav {
display: none;
}
<body>
<header>
<div class="menu">
<label for="toggle">[clique aqui]</label>
</div>
<input id="toggle" type="checkbox" />
<nav>
<ul>
<li><a href="#">INICIO</a></li>
<li><a href="#">SOBRE</a></li>
<li><a href="#">CONTATOS</a></li>
<li><a href="#">FALE CONOSCO</a></li>
<li><a href="#">PROJETOS</a></li>
</ul>
</nav>
</header>
</body>