Die Navigation ist fertiges HTML, wenn sie im Browser ankommt. Das Skript ergänzt, verändert aber nichts, worauf sich der Aufbau verlässt.
Was ohne Skript geht
| Was | Womit |
|---|---|
| Alle Links, aktive Seite, aktiver Pfad | beim Bauen geschrieben |
| Ordner auf- und zuklappen | <details> und <summary> |
Menüs von dropdown, mega, flyout per Klick | ebenfalls <details> |
Ein Ordner je Ebene (exclusive) | das name-Attribut von <details> |
| Das mobile Menü hinter dem Burger-Button öffnen und schließen | ein Kontrollkästchen und CSS |
| Umschalten an der Mobil-Grenze | Media Queries |
Was das Skript dazugibt
| Was | Ohne Skript |
|---|---|
persistState | nichts wird gemerkt |
trigger: hover | Menüs öffnen nur per Klick |
| Menüs schließen bei Klick daneben, Escape, Seitenwechsel | sie bleiben offen, bis man ihren Ordner erneut klickt |
| Panels ausweichen lassen und aus Spalten heben | Panels können aus dem Fenster ragen oder abgeschnitten werden |
| Die Seite hinter dem mobilen Menü festhalten, Escape | die Seite rollt mit |
select und mobile: select navigieren | das Menü tut nichts |
| Ordner, die nur mobil klappen, auf dem Smartphone schließen | sie bleiben offen |
| Öffnen-Animation | Ordner öffnen ohne Übergang |
| Die aktive Seite in einer langen Seitenspalte in Sicht rollen | sie bleibt, wo sie ist |
Warum die Animation das Skript braucht
Ordner, die beim Laden schon offen sind — der aktive Pfad, ein gemerkter Zustand —, sollen nicht bei jedem Seitenwechsel auffahren. Die Animation hängt deshalb an einem Attribut, das das Skript erst setzt, wenn jemand den Ordner zum ersten Mal anfasst. Ohne Skript gibt es das Attribut nicht, und ohne das Attribut keine Animation.
Wer Bewegung im Betriebssystem reduziert hat (prefers-reduced-motion), bekommt ohnehin keine.