Aus dem Kurs: CSS: Responsive Flexbox-Layouts für Profis
Erhalten Sie Zugriff auf diesen Kurs – mit einer kostenlosen Probeversion
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 25.300 Kurse von Branchenfachleuten.
Interaktion: Buttons erstellen mit HTML und CSS – Tutorial zu CSS
Aus dem Kurs: CSS: Responsive Flexbox-Layouts für Profis
Interaktion: Buttons erstellen mit HTML und CSS
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…
Üben mit Projektdateien
Laden Sie die Dateien herunter, die von den Trainer:innen verwendet werden. So können Sie mitlesen und durch Ansehen, Zuhören und Üben lernen.
Inhalt
-
-
-
-
-
-
-
(Gesperrt)
Position der Sidebar ändern - Interaktionen im Überblick2 Min. 16 Sek.
-
(Gesperrt)
Interaktion: Buttons erstellen mit HTML und CSS3 Min. 35 Sek.
-
(Gesperrt)
Sidebar tauschen: Buttons aktivieren mit jQuery6 Min. 23 Sek.
-
(Gesperrt)
Sidebar aus- und einblenden mit jQuery und CSS6 Min. 8 Sek.
-
(Gesperrt)
Sidebar aus- und einblenden - Animation mit CSS3-Transition5 Min. 48 Sek.
-
(Gesperrt)
-