Responsive Flexbox-Layouts für Fortgeschrittene

Position der Sidebar ändern - Interaktionen im Überblick

Testen Sie unsere 1890 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Mit Flexbox, einer Prise jQuery sowie CSS-Transitions ermöglichen Sie es dem Benutzer, die Sidebar links oder rechts zu positionieren oder ganz auszublenden.

Transkript

Ein Grund, warum Flexbox so beliebt ist, ist, dass es viele Dinge, die früher recht kompliziert waren, doch entscheidend vereinfacht, aber man kann auch völlig neue Dinge damit machen, so wird das z. B. sehr viel leichter, um dem Benutzer bestimmte Layoutmöglichkeiten anzubieten. Sie sehen hier ein Beispiel mit dem Holy Grail rechts oben, neu dabei ist das Wort Sidebar und drei Buttons, die hier dem Benutzer ermöglichen, das Layout zu ändern. Ein Klick auf "Links" bedeutet, die Sidebar steht links. Ein Klick auf "Rechts" bedeutet, die Sidebar steht rechts. Das ist soweit ganz einfach, aber der Benutzer kann die Sidebar auch ausblenden, komplett weg... - Der Pfeil dreht sich - und komplett wieder einblenden. Wenn sie vorher auf der linken Seite war, dann erscheint sie wieder auf der linken Seite. Das ist eine Möglichkeit, die durch Flexbox sehr viel leichter wird, das Layout zu ändern. Ergänzt wird Flexbox in diesem Fall durch ein bisschen JavaScript, um Klassen hinzuzufügen bzw. zu entfernen, um den Zustand der Buttons zu verändern. Dazu gibt es ein klein bisschen jQuery dabei und ganz zum Schluss werden Sie dann noch die Animation hier etwas anpassen, das heißt, Sie sehen, dass der Benutzer, wenn die Sidebar verschwindet, dass es nicht einfach zack macht und ist weg, sondern dass man eben sieht, was passiert hier eigentlich. Das funktioniert natürlich auf beiden Seiten, wie Sie hier sehen, und das wird mit CSS-Transitions gemacht, also ohne JavaScript. Das JavaScript wird, wie gesagt, nur benötigt, um Klassen zu entfernen oder hinzuzufügen. In diesem Beispiel ist die Interaktion an die Buttons gebunden, hier oben an diese drei, aber in echt könnte man das natürlich auch an bestimmte User-Aktionen oder Zustände koppeln, dass die Sidebar z. B. nur erscheint, wenn man nach oben scrollt oder das Ende der Seite erreicht hat. In diesem Beispiel reichen aber da zum Kennenlernen erst einmal die Buttons und auf Los geht's... Los!

Responsive Flexbox-Layouts für Fortgeschrittene

Sehen Sie, wie sich mit Flexbox die Art und Weise der Webseitengestaltung grundlegend verändern wird und wie Sie die TEchnologie schon heute einsetzen können.

2 Std. 25 min (34 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:18.10.2016
Laufzeit:2 Std. 25 min (34 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!