Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

CSS: Responsive Flexbox-Layouts für Profis

Interaktion: Buttons erstellen mit HTML und CSS

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Im HTML werden drei Buttons eingebaut und im CSS gestaltet. Das CSS bekommt außerdem ein Style für die Klasse ".sidebar-left", das nur die Anweisung "order:-1" enthält.

Transkript

Der erste Schritt zum Integrieren dieser Interaktionen sind die Buttons hier oben, die im HTML eingebaut werden und das sieht im Editor im HTML so aus, dass hier ein "div" mit der Klasse "sidebar-switcher" eingebaut wurde und zwar im "Header", bevor hier der eigentliche "site-title" kommt: "<div class="sidebar-switcher"", dadrin der Text "Sidebar:" und dann drei Buttons. Diese drei Buttons haben jeweils eine Klasse und die entspricht dem, was sie später einmal tun werden, nämlich "sidebar-left-toggle", "sidebar-right-toggle" und "sidebar-hide-toogle". Also diese drei Buttons sind drei Schalter, um die Sidebar nach links zu bringen, nach rechts zu bringen oder um sie ein- bzw. auszublenden. Innerhalb dieser drei Buttons gibt es ein Icon Font "Font Awesome", das hier oben geladen wird, direkt aus dem Internet wie immer hier bei den Übungen und das ist "fa-align-left", Font Awesome linksbündig und dadrin "span" und ein bisschen Text für den Screenreader. Das Schema wiederholt sich hier mit "fa-align-right" und "fa-arrow-circle-right". Die sehen im Browser, nochmal zur Erinnerung, so aus, "fa-align-left", "align-right" und der Circle nach rechts. In "zentrale.css" gibt es ein neues Stylesheet "sidebar-switcher.css", das eingebunden wurde, in dem die Grundgestaltung der Buttons bis jetzt so aussieht, dass auf kleinen Bildschirmen, kleinen View-Ports, hier der Sidebar-Switcher überhaupt nicht dargestellt wird und ab 40em darf er dann mitspielen: "display: block;", wird rechts oben positioniert, bekommt ein bisschen "padding" drumherum und Textfarbe hier in diesem dunklen Grauton. Die Buttons selbst bekommen auch diese Textfarbe, auch ein bisschen "padding" und dann kommt noch ein Selektor, der es in sich hat: ".sidebar-switcher button:not([disabled]):hover". Das heißt also, wenn der Button nicht das Attribut "disabled" hat, also wenn er im normalen Zustand ist, dann soll beim "Hovern" hier die Farbe etwas dunkler werden. Das sind bis jetzt die Styles, die vorhanden sind zur Gestaltung von Sidebar-Switcher und den Buttons darin. Es fehlt hier nur noch ein Style, nämlich ein Style mit der Klasse "sidebar-left", der es ermöglicht, die Sidebar nach links zu positionieren und das geht mit "order: -1;", wie Sie bereits gesehen haben; "sidebar-left", "order: -1", das ist alles was man dazu braucht, die Sidebar nach links. Jetzt brauchen wir nur noch jemanden, der, wenn der Benutzer auf den Button klickt, diese Klasse in das HTML schreibt und das passiert mit JavaScript.

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...
 

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!