nicht angemeldet
AugeHallo
Okay, wieder nur mit Javascript. Danke dennoch. Wie gesagt, ich hab nichts gegen js, aber bei diesem aktuellen Projekt nur, wenn es unumgänglich notwendig ist.
Betrachte das aktuelle Problem mal von außen.
Du willst ein Hamburger-Menü realisieren, damit das Menü, egal, wie groß es konkret auch ist, nicht zuviel Platz einnimmt. Andererseits soll die Navigation auch ohne JS funktionieren. Und du willst mit möglichst wenig Einsatz von JS auskommen.
Anforderumg 1: Das Menü muss ohne JS funktionieren. Wenn JS also, aus welchem Grund auch immer, nicht verfügbar ist oder nicht funktioniert, muss dass Menü offen sein, damit es in solchen Fällen zugänglich ist. Dann braucht es auch keinen Button zum öffnen und schließen des Menüs, denn der wäre dann funktionslos. Damit, dass das Menü in diesem Fall eben doch den benötigten Platz beansprucht, musst du leben. Kannst du aber auch. Webseiten lassen sich nämlich ziemlich einfach scrollen, wenn man als Autor das nicht kaputt macht.
Anforderung 2: Das Menü wird mit einem Button geöffnet und geschlossen. Hier kommt notwendigerweise JS zum Einsatz, um auf die Betätigung des Buttons zu reagieren. Weiterhin muss das JS die durch die Anforderung 1 definierten Vorgaben umsetzen. Dort hatte ich vorgegeben, dass das Menü ohne JS offen sein soll und dass der Button zum Öffnen und Schließen des Menüs nicht vorhanden sein solle.
Das Ergebnis ist also ein initial offenes Menü, das nach dem Laden der Seite per JS geschlossen und mit dem zur Bedienung benötigten Button versehen wird. Weiterhin wird im JS ein Event registriert, damit auf die Betätigung des Buttons reagiert werden kann und der Code zum öffnen und schließen des Menüs wird in einer Funktion hinterlegt, die bei eintreten des Events ausgeführt wird.
Wie das Menü per JS mit einem Aria-Attribut versehen wird und mit der zugehörigen CSS-Regel geschlossen wird, hat Gunnar gezeigt. Wie im JS-Skript auf die Betätigung des Buttons reagiert wird, um das Menü zu öffnen oder zu schließen, hat er auch gezeigt. Das Wissen zur Erzeugung des Buttons und zur Registrierung des Events [1] kannst du dir im hauseigenen Wiki aneignen.
Das sollte mit geschätzten 20 bis 30 Zeilen JS-Code umsetzbar sein.
Tschö, Auge
„Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde
infrage kämen click, touchstart und das alle Bedienfälle umfassen sollende pointerdown ↩︎
Rolf B
Gunnar Bittersmann