Responsive Flexbox-Layouts für Fortgeschrittene

Die etwas andere Dropdown-Navigation 1: Grundprinzip, HTML und CSS

Testen Sie unsere 1890 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die hier gezeigte Dropdown-Navigation funktioniert nicht nur auf mit der Maus bedienten Systemen, sondern auch auf Touch-Screens und bei Bedienung rein per Tastatur. In diesem Film stellt der Trainer die HTML-Struktur und die Basisgestaltung per CSS vor.

Transkript

Ich möchte Ihnen jetzt eine Navigation mit mehreren Ebenen vorstellen, also Multilevel mit dem Untertitel: das etwas andere Dropdown, denn wenn man mit der Maus hier über den Menüpunkt mit Unterpunkten fährt, dann passiert gar nichts. Meistens klappt dann ja schon das Untermenü heraus. Grund dafür ist, dass es inzwischen nicht mehr nur maus-basierte Systeme gibt, sondern auch Touchscreens und/oder Bedienung per Tastatur und dieses Dropdown-Menü funktioniert auch auf Touchscreens und auch per Tastatur. Wenn Sie mit der Tabulatortaste hier einfach durch-tabben in diesem Menü, dann sehen Sie, mit Umschalt-Tab zurück, mit Tab nach vorne, dann wird der Pfeil hervorgehoben. Jetzt kann man das mit Enter rein- und raus-klappen. Ich gehe nochmal einen weiter, hier beim nächsten passiert das genau so und das geht natürlich auch auf einem Touchscreen. Wenn man hier draufdrückt, klappt es raus und wenn man nochmal draufdrückt, klappt es wieder rein. Live und in Farbe können Sie das sehen auf "mor10.com", der Homepage von Morten Rand-Hendriksen, der dieses Videotraining konzipiert hat. Auch hier, wenn ich mit Tab durchlaufe, sehen Sie zuerst den Skip-Link und hier ist das Menü und es klappt rein und raus. Das Ganze basiert auf einer Idee des WorldPress Standard Themes Twenty Fifteen, wo man hier auf der Demoseite auch genau dieses Menüprinzip sieht, hier klappt etwas raus und hier klappt es wieder rein. Das sind also touchscreen-bedienbare Dropdowns. Hier ist unsere Übungsseite. Im Editor sehen Sie, die Dateien sind alle bereits hier im Flexbox Übungsordner. Los geht es mit einem Blick in die HTML-Datei. Dort wird die "zentrale.css" geladen wie immer und "font-awesome" wird direkt aus dem Netz geladen. Und dann die eigentliche Navigation sehen wir hier, hat die Klasse "multi-level.nav", die Basisgestaltung wie immer über die Klasse "menu" und hier gibt’s einen Listenpunkt "Startseite" mit einer Ebene und die Listenpunkte mit mehreren Ebenen haben die Klasse "has-children", hat Kinder, hat Unterpunkte. Da drin gibt es einen Hyperlink mit einem Menüwort, und einem Button daneben und dieser Button, der enthält den Pfeil unten, beziehungsweise nach oben. Der Button hat die Klasse "dropdown-toggle", also Toggle kann man übersetzen mit Schalter und "aria-expended=false" für "screen-reader". "span class=screen-reader-text Untermenü öffnen<", dieser Text: Untermenü öffnen ist nur für Screenreader gedacht, der wird am Bildschirm ausgeblendet und da steht dann "Untermenü schließen", wenn es herausgeklappt ist. Wie diese Zauberei passiert, dazu gleich noch mehr. Das Untermenü selbst hat die Klasse "sub-menu" mit einem Bindestrich dazwischen und ganz normale Unterpunkte. Der zweite Menüpunkt hier mit Untermenü hat den gleichen Aufbau, Hyperlink, Button mit Klasse "dropdown-toggle", einem "span" da drin mit Text Screenreader und die zweite Ebene hat hier die Klasse "sub-menu". Dieses HTML wird gestaltet durch ein bisschen CSS, das ich hier jetzt mal im unteren Fenster öffne "nav-multi-level.css" und das geht ganz oben los, auf kleinen Bildschirmen bis 30 em werden hier die Hyperlinks der zweiten Ebene etwas eingerückt, damit die aussehen wie eine zweite Ebene und der "dropdown-toggle"-Button, der Pfeil nach unten oder oben, wird einfach versteckt, der wird hier nicht benötigt. Ab 30 em geht es dann los hier, die Listenelemente werden relativ positioniert. Rechts das Padding von den Hyperlinks wird entfernt, weil da sitzt der Button und die zweite Ebene, da kommt der eigentliche Trick, wird simpel mit "display: none" ausgeblendet und absolut positioniert. Wenn dann die Klasse "toggled-on", also 'eingeschaltet' frei übersetzt, die per JavaScript da hingezaubert wird, wenn diese Klasse vorhanden ist, dann wird die Liste auf "display: block" gesetzt. Also nicht mehr auf "display: none" wie oben, sondern auf "display: block". So, und hier kommt der "dropdown-toggle"-Button. Die Formatierung hier relativ unspektakulär und mit der Pseudoklasse "after" wird der Pfeil nach unten eingefügt, der dann ausgetauscht wird gegen den Pfeil nach oben, wenn die Klasse "toggle-on" vorhanden ist. Also bei der inneren Liste ist es "toggled-on", mit "d" und beim Button ist es "toggle-on", ohne "d". Beides wird per JavaScript eingefügt und das schauen Sie sich auch gleich noch etwas näher an.

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!