Nawigacja - czy da się to zrobić bez użycia js, przy samym css.

Question

Mam dwa elementy, div o klasie hamburger (który ma działać jak przycisk), i navigation. Obydwa elementy są dziećmi headera. Navigation ma domyślnie display: none i ma się wyświetlić dopiero po naciśnięciu na div hamburger. Czytałem coś o znaku ~. Tylko działa on mi do pseudo klasy active(.hamburger:active~ .navigation), gdzie muszę mieć myszkę ciągle wciśnietą oraz do hover(.hamburger:hover~ .navigation), gdzie jak zjeżdżam z hamburgera to navigation znika. 

Wiem, że mógłbym zrobić to js dodać eventListenera  click do hamburgera, ale chciałbym zrobić to tylko przy uzyciu css. 

<header>
   <nav class="navigation">
             <ul">
                <li>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </li>
                <li></li>
                <li></li>
                <li></li>
             </ul>
    </nav>
    <div class="hamburger"></div>
</header>

 

Answer 1

checkbox i gdy jest active to nadajesz style dla hamburgera :)

Answer 2

Można to zrobić jak kolega wspomniał przez checboxa, ale jest to niepolecana metoda i sprawiająca problemy pod względem dostępności oraz UX.

Comments

W jaki sposób przez checkboxa?

---

https://codepen.io/anon/pen/xLooKE

---

Z właściwością :checked .

---

aaaa, teraz kumam, dzięki

Answer 3

Można też użyć pseudoclasy :focus dla kotwicy, bez zadnych checkboxow

Comments

dla kotwicy? Czyli?

---

<a> (anchor)