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

Die etwas andere Dropdown-Navigation: 2: JavaScript im Überblick

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die "etwas andere Dropdown-Navigation" basiert auf jQuery und wenigen Zeilen JavaScript, mit denen im Quelltext einige Klassen hinzugefügt bzw. entfernt werden.

Transkript

Das etwas andere Dropdown-Menü das ich Ihnen hier vorstelle, basiert auf ein klein bisschen JavaScript. Das sieht im Editor hier erst einmal so aus, hier noch einmal die HTML-Struktur oben, relativ normal "nav", "multi-level-nav" und ein Menü mit der Unterklasse "has-children" und der Hyperlink hier mit der Klasse "dropdown-toggle". Genau diese Klasse wird gesucht im JavaScript, hier gespeichert in "menu-toggle.js" im Unterordner "js". Dieses JavaScript basiert auf jQuery und jQuery wird ganz unten eingebunden, vor "/body" direkt aus dem Netz: "http://code.jquery.com" und da drunter wird eingebunden die Datei "menu-toggle.js", die Sie hier unten geöffnet sehen. Ich scrolle hier nochmal wieder da hin, wo es gleich passiert. Der Button mit der Klasse "dropdown-toggle", der wird hier im JavaScript gesucht. Außenrum die jQuery-Funktion und dann geht es hier los mit: "$( '.dropdown-toogle' )", da wird die Klasse gesucht und wenn darauf geklickt oder ge-toucht wird, wenn der aktiviert wird, dann wird das Objekt gespeichert, der Standard wird verhindert, "prevent default", die Standardaktion und dann geht es los. Hier der eigentliche Knackpunkt ist in diesen beiden Zeilen, dort werden nämlich Klassen hinzugefügt oder entfernt, das zeige ich ihnen gleich im Browser und die beiden letzten Zeilen hier dienen der Barrierefreiheit, da wird das "aria-expanded" gesetzt; wenn es auf "false" steht, wird es auf "true" gesetzt und umgekehrt und der Text für den Screenreader wird geändert von "Untermenü öffnen" in "Untermenü schließen". Das ganze jetzt im Browser, das sind nur wenige Zeilen, die dazu nötig sind. Ich öffne hier mal das Entwicklerwerkzeug vom Chrome, scrolle das nach oben, dann kann man das sehen. Hier ist der Button mit der Klasse "dropdown-toggle", danach wird gesucht im JavaScript und wenn dann der Button mit dieser Klasse angeklickt wird, dann achten Sie hier unten jetzt auf dieses HTML, dann werden dort Klassen hinzugefügt. Ich klicke jetzt hier oben drauf und unten sieht man das wunderbar, gleich viel schneller, als ich das wollte. Ein Klick, der Pfeil ist jetzt nach oben, die Klasse "toggle-on" wird hinzugefügt und der Screenreader-Text wird geändert zu "Untermenü schließen". Die Liste hier, die innere Liste, das Untermenü, bekommt die Klasse "toggled-on" mit einem "d" dahinter. Sobald ich jetzt hier oben wieder draufklicke, verschwinden diese Klassen wieder und dann sind sie gleich wieder weg. So, klicken und weg. Und klicken und wieder da. Und klicken und wieder weg. Dann sehen Sie, genau das wird durch dieses JavaScript gemacht. Hier werden also die Klassen hinzugefügt, hier wird der Text geändert, das Attribut "aria-expanded", also ausgeklappt auf gut Deutsch, wird in dem Moment, in dem das Menü herausgeklappt ist, auf "true" gesetzt und wenn das nicht der Fall ist, dann steht das auf "false", also nicht herausgeklappt. Genau diese Aktionen werden mit diesen paar Zeilen JavaScript erreicht. Dadurch bekommen Sie ein Menü, das nicht nur mausbasiert herausklappt, sondern auch auf Touchscreens und per Tastatur wunderbar zu bedienen ist.

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!