CSS: Responsive Flexbox-Layouts für Profis

Sidebar aus- und einblenden mit jQuery und CSS

Testen Sie unsere 1921 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der dritte Button wird mit der Klasse ".hide" verbunden, die die Sidebar versteckt. Außerdem soll sich das darauf abgebildete Pfeil-Symbol drehen und die beiden anderen Buttons ausgegraut werden, sobald die Sidebar verschwunden ist.

Transkript

Die ersten beiden Buttons funktionieren. Die Sidebar springt nach links und nach rechts. Nur der Dritte hat noch nichts zu tun und das ist jetzt an der Reihe. Im "sidebar-switcher.js" sind die ersten beiden Buttons definiert, es fehlt noch der Dritte und ich kopiere mir das hier schon mal rüber und muss das dann nur noch ein klein bisschen anpassen. Erstens heißt der Button nicht "right", sondern "hide-toggle". Clicken stimmt und die Bedingung hier brauchen wir auch nicht. Es reicht also völlig aus, wenn hier gleich nur diese eine Anweisung erscheint. So... und zwar soll, wenn die Sidebar hier gefunden wird, dann soll die Klasse nicht entfernt werden, sondern getoggelt, ein- oder ausgeschaltet, also eine Doppelfunktion in gewisser Weise und die Klasse soll nicht "sidebar-left" heißen, sondern "hide". Die gibt es noch gar nicht, aber die erstellen wir gleich noch schnell. Wenn der Button "sidebar-hide-toggle" angek lickt wird, dann schaue, ob die Sidebar, die die Klasse "hide" hat. Wenn sie die hat, entferne sie. Wenn sie die nicht hat, füge sie hinzu. Das bedeutet "toggleClass". So weit, so gut. Und jetzt geht es rüber ins "sidebar-switcher.css", denn hier wird die Klasse "hide" angelegt. Sidebar verstecken. Na, da fehlt noch ein kleines S. So... und los geht es mit ".hide" und da kommt als erstes die Flex-Anweisung "0 0 0;" Das würde schon reichen. Ich setze hier mal ein "px" hinter. Erstens versteht der IE11 das besser und zweitens ist es auch deutlicher zu lesen. Das Element hat eine gewünschte Ausgangsbreite von 0 Pixel. Es darf weder schrumpfen, was sowieso schlecht möglich wäre, noch wachsen, was in diesem Falle zwar möglich wäre, mit einer Ausgangsgröße von 0 Pixel aber nicht wünschenswert. Das Element hat ein padding. Das soll auch gleich versteckt werden. Und dann können wir schon mal probieren, was hier passiert. Also "sidebar-switcher.js" hat einen dritten Button hier drinnen. Da soll eine Klasse hinzugefügt oder entfernt werden und die Klasse ist hier im CSS definiert. Rüber in den Browser, einmal komplett neu laden alles und... Trara! Da ist er fast weg, aber noch nicht ganz. Wenn ich den jetzt wieder anklicke, "toggle", dann springt er wieder zurück und so geht er rein und raus. Das, was Sie hier sehen, ist der Inhalt. Das ist also überfließender Inhalt und überfließender Inhalt wird im CSS abgeschnitten mit der Anweisung "overflow: hidden" Das wird hier nur relevant, wenn das auch gebraucht wird. Und Klick und weg ist er und Klick und da ist er wieder. So... die beiden Buttons funktioneren und den kann ich auch ein- und ausschalten. Fehlen noch zwei Dinge: Eine optional und eine nicht so ganz optional. Das Erste ist, dass wenn dieser Button eingeschaltet ist, dann soll er sich drehen und die anderen beiden sollen deaktiviert werden. Das ist noch ein klein bisschen JavaScript. Und beim Verschwinden soll das nicht so zack, zack gehen hier, wie das jetzt im Augenblick ist, sondern der soll so eine leichte Animation kriegen. Das dauert ein bisschen länger und das ist ein eigener Film. Aber die Sache mit dem Buttondrehen und mit dem Abblenden der anderen Buttons, das ist noch ein bisschen JavaScript und da wir gerade so schon dabei sind, soll das hier eingefügt werden und zwar auch dann, wenn der Button angeklickt wird. Das kommt hier also mit rein. So... Cursor hierhin. So... Da ist es drin. Das Tippen dauert schlicht und einfach zu lange, aber wir gehen das natürlich einmal eben durch und ich mache da noch ein bisschen Luft zwischen. So... Das bedeutet: Wenn die Sidebar die Klasse "hide" hat, dann soll der Circle nach rechts, der Kreis nach rechts ein Style-Attribut bekommen mit der CSS-Anweisung "transform", "rotate(180deg)" also einmal rumdrehen auf gut Deutsch. Gleichzeitig soll hier "sidebar-left-toggle" und "sidebar-right-toggle" also die anderen beiden Buttons, die bekommen das Attribut "disabled", was auf "true" gesetzt wird und bekommen auch ein Style-Attribut mit der Anweisung "opacity", "0.5" also, so ein bisschen blasser werden die. "else", also wenn die Sidebar die Klasse "hide" nicht hat, dann soll "sidebar-left-toggle" und "sidebar-right-toggle" "disabled", "false" gesetzt werden und der Pfeil nach rechts und die beiden Buttons, da wird das Style-Attribut komplett entfernt. Das ist alles im Überblick, alles, das passiert beim Anklicken des "sidebar-hide-toggle"-Buttons. Rüber in den Browser, neu laden und jetzt wird spannend. Anklicken. Und Sie sehen, es hat geklappt: A. Die Sidebar ist weg B. Der Pfeil wurde gedreht, "rotate(180deg)" und die beiden Buttons sind nicht mehr anklickbar und sehen auch gleich etwas blasser aus hier.

CSS: Responsive Flexbox-Layouts für Profis

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

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!