Display Flex

Datum: 13. Juli 2016
Autor: Philip Dumas


Folgende Problemstellung:

Mobile Navigationsdarstellung in Tirol. Es soll sich die Reihenfolge der Navigationselemente im Vergleich zur Desktopvariante ändern. Desweiteren soll beim Klick auf die Lupe die Volltextsuche unter der Navigation ausklappen und die volle Bildschirmbreite benutzen. Die Navigation ist hierbei eine „ul“, die einzelnen Navigationselemente „li“s.

Weisst man dem Suchformular hier nun width:100% zu, so bezieht sich dies auf das Listenelement darüber und die Suche hängt unmotiviert in der Mitte des Screens unter der Lupe.

Lösung:

Der „ul“ wird „display:flex“ zugewiesen. Allen „li“s werden eventuell vorhandene „position“ Anweisungen genommen und es wird für die Positionierung der „li“s im css ein „order“ tag zugewiesen (order:1 order:2 etc.). Es ist darauf zu achten ,dass auch wirklich ALLE „li“s einen solchen order tag erhalten. Dann werden die Listenelemente in aufsteigender Reihenfolge anhand ihrer Order-Tags angeordnet, hat ein Element keine Order Anweisung, wird es automatisch an den anfang der Liste gestellt.

Nun kann dem Formular unter dem „li“ width:100% zugewiesen werden und es bezieht sich tatsächlich auf die „ul“.

Umgesetzt so unter tirol.at.

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema User Experience & Design


AJAX Ladeschnecke ohne Bilder oder zusätzlichem CSS

Autor: Stefan Oswald


Technologie // User Experience & Design


Der Anwendungsfall tritt sehr oft ein: Eine Ergebnisliste soll nachgefiltert werden, und zur Visualisierung, dass gerade etwas im Hintergrund passiert, soll eine „Ladeschnecke“ (oder vielleicht etwas old-school-mäßig ein Fortschrittsbalken) angezeigt werden. Oftmals wird das so umgesetzt, dass man im „beforeLoad“-Ereignis des AJAX-Calls eine animierte Grafik hinzufügt, welche im „complete“-Ereignis wieder entfernt oder unsichtbar gemacht wird. …


Beitrag lesen
23.
Juli
2014

PhotoSwipe: Responsive JavaScript Image Gallery

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Ich bin gestern auf eine ziemlich geniale Lightbox-Lösung gestoßen: PhotoSwipe. Diese baut auf Vanilla JS auf und ist auf hohe Performance und die mobile Verwendung ausgelegt, bei der ja doch ziemlich viele Lightboxen scheitern oder von uns sogar deaktiviert werden. Und trotz all dieser Features sind das Skript und die dazugehörigen Styles sehr klein was …


Beitrag lesen
22.
Sep.
2016

The Vanilla Javascript Repository

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Und gleich noch ein Linktipp für all diejenigen, die wie ich, nur ungern jQuery einsetzen und ihre Seiten dadurch aufblähen oder verlangsamen. Unter Vanilla List gibt es eine optisch sehr ansprechende Sammlung von Skripten, die auf Vanilla JS aufbauen und viele unserer Anwendungsfälle abdecken können. Sehr schön ist auch die direkte Anzeige davon, ob eine …


Beitrag lesen
23.
Sep.
2016

Spamschutz-Alternative: MotionCAPTCHA

Autor: Stefan Oswald


Projekte // Technologie // Über den Tellerrand // User Experience & Design


Sehr interessanter Ansatz: > MotionCAPTCHA > Beispielseite Die Idee dahinter ist, dass der Benutzer eine vorgegebene Form (z.B. einen Kreis, einen Stern oder ein Häkchen) nach malen muss. Bots dürften daran zuverlässig scheitern. Der Autor betrachtet die derzeitige Version 0.2 als „Proof of Concept“ und noch nicht aus produktiv einsetzbare Lösung. Wir sollten das im …


Beitrag lesen
20.
Mai
2014