nicht angemeldet
Rolf BHallo TimNie,
das Problem ist, dass die Animation die Sidebar von left:-300px nach left:0 bewegt. Die Sidebar ist - durch Dich - absolut positioniert, d.h. diese Angaben beziehen sich auf den linken Rand desjenigen Vorfahren, der selbst eine nichtstatische Positionierung besitzt (statische Positionierung hast Du mit display:static, was für die meisten Elemente der Normalwert ist).
Im einfachen Fall verwendet man dafür ein Element mit position:relative. Es könnte auch ein anderes absolute-Element sein, oder fixed, oder sticky.
Ein solches Element hast Du nicht. Deshalb verwendet er den Viewport als Bezugsposition, also den linken Fensterrand.
Gib dem body-Element position:relative, und der Sprung ist weg.
Allerdings ist es dann auch so, dass das Element zu Beginn der Animation nicht komplett aus dem Fenster hinausgeschoben ist, sondern einfach 300px weiter links beginnt und von da an seine Wunschposition fliegt. Das stört aus meiner Sicht nicht weiter, der wichtigste Effekt ist, dass die Sidebar sich synchron mit dem Rest bewegt.
Aber meine Frage wäre: Wieso machst Du das? Das Ändern der Fenstergröße ist keine "Normalbedienung" deiner Seite, es ist ein Ausnahmefall. Das Umgruppieren zu animieren ist deshalb etwas, das dem Besucher keinen Nutzen bringt, es ist ein visueller Gag. Für manche ist es sogar die englische Bedeutung von gag: es führt zu Würgereiz. Es gibt nämlich Leute, die solche Animationen nicht vertragen und eine Form der Reisekrankkeit (motion sickness) erleben. Für solche Leute gibt es im Betriebssystem Schalter, um Animationen zu reduzieren, und im CSS gibt es eine @media-Query, um diesen Schalter abzufragen: prefers-reduced-motion.
Du müsstest in einer entsprechenden media-Query die Animationseigenschaften deaktivieren, indem Du die animierenden CSS-Eigenschaften für die sidebar überschreibst. Es gibt leider kein CSS, mit dem Du eine Klasse entfernen könntest. DAS geht mit etwas JavaScript:
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
document.querySelector("#sidebar").classList.remove("w3-animate-left");
}
Ungetestet, müsste aber funktionieren. Einfach am Anfang oder Ende deines Scriptblocks im Body einbauen (nicht im head, da findet er die sidebar noch nicht).
Ein paar kleine bis schwerwiegende „Nebensächlichkeiten“ hätte ich noch:
- das html-Element braucht ein lang-Attribut: <html lang="de">
- deine Seite ist nicht zugänglich: wer keine Maus und keinen Touchscreen hat, ist verloren. Das Menü lässt sich nicht öffnen. Grund: <span...onclick>. Wenn Du einen Button möchtest, verwende ein button-Element. Das ist interaktiv und bedienbar. Ein click-Handler soll nur auf interaktiven Elementen verwendet werden. Oder es muss eine alternative Möglichkeit geben, die Funktion hinter dem Klick auszulösen. Beispielsweise könnte man für das Schließen des Sidebar-Menüs auch auf die Esc-Taste reagieren.
- Binde keine externen Ressourcen ein, sondern kopiere sie auf deinen Server. Externe Zugriffe können zu Tracking durch die Datenlieferanten führen, was Du deinen Besuchern nicht ausfühlich DSGVO-konform erklären möchtest. Beim w3.css ist das schnell gemacht, bei FontAwesome sind das die css-Datei und dazu die von ihr per @font-face eingebundenen woff-Dateien. Da musst Du ggf. die URLs für deine Kopie anpassen, und natürlich musst Du prüfen, ob W3Schools und FontAwesome das gestatten. Wenn nicht, wären diese Komponenten für mich ein No-Go.
Sicher gibt's noch mehr davon, aber ich habe jetzt keine Zeit für ein umfangreiches Gutachten.
Rolf
sumpsi - posui - obstruxi
Gunnar Bittersmann
JürgenB