Responsive Flexbox-Layouts für Fortgeschrittene

Erweiterte Navigation 1: HTML und FontAwesome

Testen Sie unsere 1893 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die erweiterte Navigation enthält Icons und Text und wird mit verschachtelten Flexboxes gestaltet. In diesem Film lernen Sie zunächst die Icons kennen und erhalten danach eine Vorstellung des HTML-Codes für die Navigation.

Transkript

In der erweiterten Navigation, erweitert mit Icons und Text oder auf Englisch "advanced", da geht es um Flexbox-Verschachtelung, es werden also mehrere Flexboxen ineinander stehen, denn sowohl das Menü selbst soll geflext werden, als auch die einzelnen Menüpunkte. Hier soll erreicht werden, dass das erste Wort jeweils neben dem Icon steht, in der gleichen Größe und da drunter etwas kleiner und kursiv der Rest des Satzes. Das soll dann in etwa so aussehen, das große Icon, das erste Wort daneben und darunter in kursiv jeweils der Rest des Satzes. Das ist unsere Ausgangsposition, und im Editor sieht das Ganze so aus: Hier ist "nav-advanced.html". Ich habe die entsprechenden Dateien in den Übungsordner kopiert. Es ist eine ganz normale HTML-Seite, genau wie bei der einfachen Navigation, einzige Neuerung ist hier ein Link zum "bootstrapcdn.com/font-awesome" Stylesheet. Das ist die einfachste Art, um diese Icon-Fonts von "Font Awesome" auf "fontawesome.io" einzubinden. Man kann die auch herunterladen und installieren, aber wenn's mal eben schnell gehen soll, dann reicht es, wenn man, zum Beispiel, hier einfach das Stylesheet einbindet, indem man die Adresse kopiert und diesen Text einfügt. Genau das habe ich getan hier. So ist unsere Ausgangsposition im Editor, hier ist die Zeile drin, gespeichert ist, und ab jetzt wird direkt aus dem Internet dieses Stylesheet geholt. Eingebunden werden die Icons weiter unten, hier ist "nav-advanced", Ich mache da noch mal eine Zeile zwischen, damit man das genau sehen kann, das ist etwas länger, aber die Struktur ist im groben genauso, wie bei jedem anderen Menü auch, "nav" mit der <class=advanced-nav". Die Grundgestaltung kommt über die Klasse "menu", und hier ist eine ungeordnete Liste mit Listen-Elementen, und jetzt kommt die Besonderheit -- in diesen Listen-Elementen gibt es Hyperlinks, hier <a, und innerhalb der Hyperlinks -- seit HTML5 ist das erlaubt, dass ein Hyperlink um "block"-Elemente geht -- innerhalb der Hyperlinks gibt es also zwei "div"s, ein "div" mit der Klasse "icon", da drin ist dann, wie bei "Font Awesome" empfohlen, das etwas zweckentfremdete <i-Element, das <i steht eigentlich nicht für Icon und das Attribut <class= "fa fa-home", "fa" für Font Awesome. Das ist also dann der Klassenname für das Home-Symbol. Auf der gleichen hierarchischen Ebene steht dann der Text, <div class="button-txt" und darin das Wort und der Rest des Satzes, damit es später geblockt werden kann, in einem eigenen <span. Diese Struktur ist bei den anderen Menüpunkt genauso. Hier ist es "fa-cutlery", "fa-file-text" und "fa-paper-plane". Schauen Sie sich auf "fontawesome.io" ruhig einmal um, was es da so alles gibt, falls Sie die Icon-Fonts von "Font Awesome" nicht sowieso schon kennen.

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!