Ein Menü mit mehr Accessibility
In den letzten Tagen habe ich immer mal wieder an meinem Hamburger-Menü auf kleinen Devices gearbeitet und es zugänglicher gemacht. Zunächst einmal war es ja sowieso schon eine Checkbox, was den einfachen Vorteil hat, dass das Menü auch dann noch funktioniert, wenn JavaScript einmal deaktiviert oder kaputt ist: Ich prüfe im CSS einfach auf die :checked
-Pseudoklasse des input
und zeige abhängig davon mittels general sibling combinator das Menü an oder eben nicht:
nav input:checked ~ ul {
display: block;
}
So etwas mit einem button
umzusetzen ist ohne JavaScript nicht möglich.