CSS: Einblendung von Links "springt" bei Seitenrand
TimNie
0 
Rolf B
0 
JürgenB
0 Rolf B
0 JürgenB
0 
Gunnar Bittersmann
CSS: Einblendung von Links "springt" bei Seitenrand
TimNie
Hallo,
auf o.g. Seite wird - je nach Bildschirmbreite - das Menü (<nav> mit Klasse "sidebar") direkt angezeigt oder muss über einen Menübutton eingeblendet werden.
Wird die Seite in einem kleinen Browserfenster geladen, sodass das Menü initial nicht angezeigt wird (display:none), und das Browserfenster dann in der Breite vergrößert, schiebt sich der Seiteninhalt nach links und das Menü wird von links eingeblendet:
.w3-animate-left{animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
Das funktioniert alles wunderbar, aber:
Wird die Seite in einem großen Browserfenster geladen (dann mit margin:auto) und das Menü "fliegt" von links ein, dann bewegt es sich nicht fließend an den Seiteninhalt heran, sondern "springt" die letzten 100-200 Pixel.
Es liegt ja wahrscheinlich an den automatischen Seitenrändern, aber ich bekomme den Dreh nicht, wie ich Abhilfe schaffen kann. Vielleicht kann einer von euch mich auf den richtigen Weg bringen?
Besten Dank!
-
Hallo 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-
@@Rolf B
das Problem ist, dass die Animation die Sidebar von left:-300px nach left:0 bewegt.
Und du erwähnst nicht, was daran das Problem ist‽
Man sollte nicht
leftanimieren – aus Performanzgründen. Findet man etliche Male im Archiv (Threads, an denen du auch beteiligt warst).Zum Rein- und Rauschieben(!!) des Menüs sollte man
translate(transform) verwenden.Ja, zum Rausschieben – gerade diese (bei TimNie fehlende) Animation ist bedeutsam. Denn die gibt Nutzern die Gewissheit, dass das Menü nicht gänzlich weg ist, sondern sich gleich außerhalb des Viewports befindet und bei Bedarf wieder reingeschoben werden kann.
Eben weil das animierte Rein-/Rausschieben des Menüs sinnvoll ist und auch Nutzer, die „Bewegung reduzieren“ eingestellt haben, nicht nerven dürfte, kann man dies auch durchaus für alle Nutzer tun. „Reduzierte Bewegungen“ heißt nicht „gar keine Bewegungen“.
Fun fact: Ich habe bei der Implementierung des Menüs beim Tagesspiegel das Rein-/Rausschieben nicht für
@prefers-reduced-motiongemacht. Spätestens bei der Vorbereitung der Präsentation Respect user preferences beim UXcamp kam ich drauf, dass das nicht die beste Idee ist. Ich dachte, ich hätte das schon geändert. Hab ich aber nicht. Gleich mal ein Ticket anlegen – oder suchen, ob ich schon eins angelegt habe.Kwakoni Yiquan
--
Ad astra per aspera
-
Hallo,
Wird die Seite in einem großen Browserfenster geladen (dann mit margin:auto) und das Menü "fliegt" von links ein, dann bewegt es sich nicht fließend an den Seiteninhalt heran, sondern "springt" die letzten 100-200 Pixel.
ich habe gerade versucht, das nachzuvollziehen:
- Beim ersten Aufruf ruckelt das Menü.
- Beim zweiten Aufruf wird es gleichmäßig eingeschoben.
- Nach Löschen des Browsercaches ruckelt es wieder.
Mein Verdacht: es liegt an den von Drittanbietern eingebundenen css-Dateien. Möglicherweise dauert deren Laden zu lange. Außerdem ist das Einbinden von externen Resourcen Datenschutzrechtlich kritisch, da du die IP deiner Besucher den Hostern dieser Dateien mitteilst und so mögliches Tracking unterstützt.
Meine Anmerkungen:
- Hoste alle Ressourcen selbst.
- Verwende semantische geeignete Elemente. Z.B. ist <p><b> … </b></p> keine Überschrift, und <a onclick="…" href="javascript:void(0)" …>… möchte wohl ein button sein.
- Die Untermenüs werden ohne Javascript nicht angezeigt!
Gruß
Jürgen-
Hallo Jürgen,
sprichst Du von einer unsauberen Animation oder von einem Springen?
Aus meiner Sicht hat TimNie das richtig erkannt: sobald der Body einen sichtbaren Margin hat, springt die Sidebar das letzte Stück. Den Grund dafür habe ich beschrieben.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
sprichst Du von einer unsauberen Animation oder von einem Springen?
Ich habe beobachtet, dass das Menü beim ersten Aufruf ungleichmäßig (in Sprüngen) und beim zweiten gleichmäßig eingeschoben wird. Gerade konnte ich das mit Löschen des Cache aber nicht mehr nachvollziehen. Keine Ahnung was das bei mir[1] war. Aber Einbinden externer Ressourcen ohne Einwilligung der Besucher geht nicht.
Gruß
Jürgen
aktueller Safari auf MacBook Air aus 2015. ↩︎
-
-
@@JürgenB
- Die Untermenüs werden ohne Javascript nicht angezeigt!
Und bei den Untermenüs wird bei Tastaturbedienung nicht angezeigt, wo man sich befindet, was die Bedienung sehr erschwert.
Der Grund ist
.w3-bar-block .w3-bar-item { outline: 0 }aus dem von W3Schools übernommenem Stylesheet. Weg damit!Merke: Niemals den Müll aus W3Schools irgendwo einbauen!
Kwakoni Yiquan
--
Ad astra per aspera