CSS: Responsive Flexbox-Layouts für Profis

Einfache Navigation 1: HTML und Grundformatierung

Testen Sie unsere 1985 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Eine einfache Navigationsleiste wird entweder vertikal oder horizontal dargestellt und bildet die Grundlage für viele andere Navigationen. In diesem Film geht es um das zugrunde liegende HTML und die grundlegende Gestaltung per CSS.

Transkript

Eine einfache Navigationsleiste ist die wohl meist verbreitete Form eines Menüs im Web und bildet die Grundlage für andere Navigationen wie Dropdown, Social Media-Leisten und vieles mehr. Bei einer solchen einfachen Leiste werden alle Menüpunkte, auf einer Ebene dargestellt, so wie hier zu sehen. Und es gibt zwei grundlegend verschiedene Gestaltungsmöglichkeiten. Nummer eins ist vertikal, also alle Menüpunkte untereinander, was zum Beispiel für ein Menü in einer Sidebar oder auf mobilen Geräten mit kleinen Bildschirm oft gebraucht wird. Oder horizontal, bei dem alle Menüpunkte nebeneinander stehen, was auf größeren Bildschirmen der Normalfall sein dürfte. Ausgangspunkt ist in jedem Fall ein vertikales Menü, so wie hier zu sehen, dass auch auf kleinen Bildschirmen funktioniert. Dieses Menü hat eine Basisgestaltung die mit "media queries" für breitere "viewports" erweitert wird. Dabei wird in die Display-Eigenschaft für das umgebende Element auf "flex" gesetzt, so dass es zu einer Flexbox wird und dann kann es losgehen mit dem Gestalten per Flexbox. Im Editor sieht diese Datei, nav-single-level.html ist der Dateiname, so aus. Ist ganz normal hier. Ein head-Bereich mit einem Link zum Stylesheet zentrale.css Dann im body ein skip-link, ein header, ein main-Bereich und da drin ein section, indem es eine Überschrift und ein Navigationselement gibt. Das ist das, worum es in diesem Film geht und da ist eigentlich nichts spektakuläres bei. Das umgebende nav-Element hat zwei Klassen einmal single-nav und Menü, "menu" geschrieben, sowie die area landmark role "navigation". Dann gibt es ein ul-Element und da drinnen Listen-Elemente Alles ganz normal. In zentrale.css werden hier die Basis-Stylesheets eingebunden, dann kommt die Grundgestaltung für alle Navigationsbeispiele und dann noch ein Stylesheet spezifisch für dieses Beispiel. Also nav-base, die Grundgestaltung, enthält wenige Styles das umgebende section-Element bekommt ein bisschen Abstand. Dann die Liste selbst, die menu-Liste, die Navigationsliste ohne Aufzählungspunkte. Kein padding, kein margin und eine Hintergrundfarbe. Ziemlich dunkel, wie hier zu sehen ist. Dann die Hyperlinks werden geblockt, bekommen keine Unterstreichung. Eine weiße Schriftfarbe und ein bisschen padding. Und beim hovvern oder durchtabben wird die Hintergrundfarbe etwas heller. 15 Prozent hier normal und beim hovern 25 Prozent. Also etwas mehr Licht. nav-single-level.css, das Stylesheet für die Gestaltung der einfachen Navigationsleiste ist im Moment noch komplett leer und da drinnen wird dann gleich gearbeitet.

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!