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.

Responsive Webdesign – Grundlagen

Klappnavigation realisieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit einer Prise JavaScript realisieren Sie eine Klappnavigation – samt eines Icons zum Anklicken.

Transkript

Eine schöne Möglichkeit zur Umsetzung der Navigation ist eine Klappnavigation. In diesem Film sehen Sie wie man so etwas selbst umsetzt mit etwas JavaScript und viel CSS. Ein Beispiel für so eine Klappnavigation gibt es auch bei dem WordPress, Theme Twenty Twelve. Wenn Sie das hier einmal anschauen, das ist unsere Navigation beim großen Viewport. Und wenn wir das hier dann klein machen, dann haben wie so ein Menü-Button. Und wenn ich draufklicke, klappt das hier aus, die Punkte, und sonst verschwindet das wieder. Die Realisierung hier bei Twenty Twelve ist auch die Basis für die Lösung, die ich Ihnen hier jetzt zeige. Wie kann man prinzipiell so etwas machen? Sie brauchen immer dafür JavaScript. Sie haben dann die Wahl: Sie können ein fertiges Plugin nehmen, oder Sie können es selbst programmieren. Wir wollen uns einmal anschauen wie man so etwas selbst programmiert und verwenden dafür auch nicht jQuery, sondern JavaScript pur. Das ist im Zweifelsfall performanter, weil eben jQuery gar nicht erst geladen werden muss. Und Performance ist ja ganz zentral, besonders wenn eben Benutzer auch mobil unterwegs sind und schlechtere Verbindung haben und an sich sowieso größere Latenzzeiten. Was soll in unserem Beispiel geschehen? Schauen wir uns das hier einmal an. Also, bei großem Viewport haben wir hier eine Navigation, die Navigationspunkte sind nebeneinander angeordnet. Bei kleinerem Viewport hingegen ist die Navigation ausgeblendet, aber ich habe hier so ein Button und kann auf den draufklicken. Und dann klappt die Navigation aus und kann sie wieder einklappen. Die Inhalte sind weiter unten. Wichtig ist bei solchen Lösungen immer, wenn wir auch JavaScript einsetzen, dass das Ganze ohne JavaScript auch funktioniert. Und das möchte ich hier einmal simulieren. Ich habe die Web Developer Tool bar im Firefox installiert und kann hier über Deaktivieren ganz leicht JavaScript deaktivieren, kann sagen: ich möchte es vollständig deaktivieren. Muss die Seite natürlich dann neu laden. Und dann sehen Sie wie es aussieht. Bei großem Viewport hat sich nichts geändert und auch das Umschalten zwischen kleiner Darstellung und großer Darstellung funktioniert natürlich, weil das mit CSS gemacht ist. Aber bei kleinem Viewport haben wir nicht den Klappaus-, Klappeineffekt. Damit kann man aber leben. Wichtig ist einfach, dass falls JavaScript deaktiviert ist, trotzdem die Menüpunkte noch erreichbar sind, dass es dann nicht so komfortabel ist, das ist in Ordnung. Beginnen wir einmal und schauen uns den benötigten Code an. Ich habe hier erst einmal den HTML-Code. Verwende hier HTML 5. Das hatte hier in diesem Beispiel einen ganz konkreten Vorteil. Sie können nämlich in HTML 5 auch dem HTML Start tag Klassen hinzufügen. In HTML 4.01 war das nicht erlaubt. Und das brauchen wir, weil wir einen Marker verwenden wollen, der uns sagt: JavaScript ist aktiviert, beziehungsweise JavaScript ist nicht aktiviert. Und dafür hat sich inzwischen etabliert als gute Lösung dem HTML-Element eine Klasse zuzuweisen. Es macht beispielsweise auch das Script Modernizr. Und hier habe ich jetzt erst einmal no-js hingeschrieben, das heißt JavaScript ist nicht aktiviert. Und ich lasse nämlich dann per JavaScript dieses no-js in js umwandeln. Dadurch habe ich eine eindeutige Kennzeichnung immer: ist JavaScript aktiviert oder nicht. Und das ist wichtig, weil wir ja auch unsere Fallback-Lösung im Hinterkopf haben. Es soll ja auch ohne JavaScript funktionieren prinzipiell. Dann habe ich natürlich wie immer meine wichtige Viewport-Angabe, damit die Smartphones das nicht so verkleinern, sondern normal anzeigen. Und hier habe ich schon ein Verweis auf ein Stylesheet. So, jetzt gibt es hier den Navigationsbereich. Sie sehen, das ist ein div-Element. Und in diesem div-Element sind zwei Sachen drinnen. Zum Einen ein h3-Element. Das beinhaltet meinen Menü-Button, der dann das Aus- beziehungsweise Einklappen erledigt. Und für diesen Button, da muss man sich natürlich überlegen, wie realisiert man den. Könnte man irgendein Icon oder sonst was nehmen. Ich habe mich hier dafür entschieden für eine ganz einfache Lösung, nämlich das entsprechende UTF-8 Entity zu verwenden. Wenn Sie es nachher anschauen, warum das so ein bisschen kompliziert hier angegeben ist, hier sehen Sie das UTF-8 Entity und hier den Text. Und per CSS lese ich dann dieses hier aus und lasse es anzeigen und blende den Text aus. Gut, also, innerhalb des Navigationsbereiches befindet sich zum Einen mein Menü-Button und zum Anderen mein Menü selber, die natürlich ganz normal eine ungeordnete Liste ist. Ich hätte hier natürlich auch zum HTML 5-Element nav greifen können. Diese HTML 5-Elemente haben aber derzeit noch keinen konkreten Nutzen und sie haben den Nachteil, dass ich dann immer für ältere IEs ein zusätzliches JavaScript einbinden muss, damit überhaupt dann Formatierungen funktionieren. Deswegen habe ich dieses Beispiel hier einfacher gehalten und darauf verzichtet. Außerdem sehen Sie hier noch ein Inhaltsbereich und ganz entscheidend ein Verweis auf eine JavaScript-Datei. Jetzt wollen wir uns einmal ansehen was wir eigentlich mit JavaScript im Beispiel machen. Und wir verwenden hier JavaScript ganz modern so wie man das heute verwendet. Wir lassen mit JavaScript Klassen hinzufügen, die widerspiegeln welche Situation gerade ist und die uns dann die Möglichkeit geben in CSS die eigentlichen Formatierungen vorzunehmen, das heißt Elemente auszublenden oder anzeigen zu lassen. Schauen wir das einmal konkret an. Gehen hier in den Firefox. Und dann kann ich im Firebug, dies aktiviere ich hier mal, mir immer auch anzeigen lassen welche Klassen für JavaScript hinzugefügt wurden. Sie sehen hier erst einmal: ich habe das hier aufgerufen und die Klasse lautet jetzt js. Ich hatte ja im HTML-Code drinstehen no js. Also, das ist das Erste was mit JavaScript geschieht, es wird diese Klasse hier ersetzt. Gehen wir dann weiter zur Navigation. Und dann sehen Sie, erstmal schaut das so aus. Und wenn ich jetzt hier draufklicke, dann ist was geschehen. Ich zeige es nochmal. Ich drücke hier drauf und dann werden hier Klassen zugewiesen. So, dass man es vielleicht noch ein bisschen deutlicher sieht. Es kommt die Klasse toggled-on sowohl bei dem h3-Element, das heißt bei dem Button, als auch bei dem ul-Element. Und wenn ich wieder draufklicke, dann verschwindet das. Das heißt, mit JavaScript mache ich im Endeffekt zwei Sachen. Zum Einen, tausche ich die Klasse beim HTML Start tag aus, um zu wissen, ist JavaScript aktiviert oder nicht. Und zum Anderen, füge ich dynamisch eine Klasse hinzu bei dem Button selber und auch bei dem ul-Element. Gehen wir mal zur konkreten Realisierung. Hier ist die Datei, die JavaScript-Datei. Ich habe die ganze Funktionalität innerhalb von Function geklammert, damit es keine Probleme mit irgendwelchen Namen geben kann. Als Erstes ergänze ich die neue Klasse js und ersetze die ursprüngliche Klasse no-js durch nichts. Und das dieses Mal mache ich das mit Java Script pur. Dann habe ich eine Funktion erstellt, die diese Ausklappfunktionalität beinhaltet. Dass ich eine Funktion verwende, hat den Vorteil, dass ich das auch bei mehreren Navigationen auf einer Seite verwenden könnte. Die Funktion erwartet die ID des Elements, was die Navigation beinhaltet. Und dann erstelle ich mir Variablen, um auf die Sachen, die ich brauche, zuzugreifen. Wenn das Navigationselement nicht gefunden wird, dann verlasse ich meine Funktion, was hier über Return geschieht. Ansonsten wähle ich meinen Button aus und der Button ist das erste h3-Element innerhalb des Navigationsbereiches. Also, hier ist es wichtig, damit das Ganze funktioniert, muss der HTML-Code auch entsprechend konstruiert sein. Genauso ist mein eigentliches Menü, das erste ul-Element. Mit 0 sprechen Sie immer das erste Element an, als erster Element innerhalb der Navigation. Und falls die nicht gefunden sind oder nicht da sind, dann breche ich das Ganze wieder ab. Das erledigt immer das Return. Jetzt komme ich zu einem entscheidenden Teil. Es soll nämlich jetzt der Klick auf den Button immer abgefangen werden. Und das hier mache ich mit button.onclick Und was dann geschehen soll, steht in einer anonymen Funktion drinnen. Und was geschieht dann hier? Es wird immer die Klasse toggled-on hinzugefügt beziehungsweise entfernt. Also, es ist so ein wechselndes Klassenhinzufügen. Und am Schluss kommt das Entscheidende. Da rufe ich die Funktion auf und zwar für das Element mit der ID navi. So, damit ist alles Wichtige mit JavaScript erledigt. Und wir können uns den CSS-Teil anschauen. Es gibt hier ein paar allgemeine Formatierungen. Zum Beispiel, erst einmal habe ich hier die Formatierung für die großen Viewports. Wichtig ist hier beispielsweise, dass ich die Menüpunkte nebeneinander anordnen lasse über inline-block. Sonst sind das ein paar allgemeine Formatierungen. Entscheidend auch noch diesen Button zum Anzeigen des Menüs. Den brauche ich natürlich bei großen Viewports nicht, weil er da keine Funktion hat und das heißt, ich lasse ihn hier ausblenden. Für kleinere Geräte, ich habe jetzt hier 88 Pixel gewählt. Das kann man natürlich beliebig anpassen, muss man einfach schauen wie viel Menüpunkte er hat und wie es gut aussieht. Man könnte sich auch entscheiden hier auf em zuzugreifen. Das wäre auch eine gute Möglichkeit. Da soll jetzt eigentlich bisschen was geschehen. Zum Einen wird der Menü-Button selber gestylt. Und ganz entscheidend jetzt hier diese Zeile. Damit wähle ich die ul aus, wenn sie innerhalb der Navigation steht, die innerhalb des Elements mit der Klasse js steht. Und damit wähle ich diese ungeordnete Liste der Navigation nur aus, wenn JavaScript aktiviert ist. Und wenn JavaScript aktiviert ist, dann lasse ich meine Navigation ausblenden. Und ich muss sie natürlich wieder einblenden lassen. Und einblenden lasse ich sie, wenn sie zusätzlich die Klasse toggled-on erhalten hat. Weil diese Klasse wird ja immer zugewiesen, wenn ich auf den Button das erste Mal klicke. Und dann lasse ich sie wieder einblenden. Das heißt, diese Zeilen erledigen das Ein- beziehungsweise Ausblenden. Das sind die Entscheidenden. Und hier kommt jetzt noch die Formatierung des Menüs. Standardmäßig bei großen Bildschirmen ist das Menü ja horizontal angeordnet. Und jetzt möchte ich das nicht mehr, dass vorher hatte ich display inline-block und hier wandle ich das in display: block um. Jetzt fehlt noch die Gestaltung des Menü-Buttons selber. Schalten wir dafür nochmal kurz zum HTML-Code. Hier sehen Sie den Menü-Button an h3-Element mit zwei span-Elementen. Das eine span-Element erhält das neue HTML 5-Attribut. Die beginnen ja immer mit data und dann kann ich selber einen Namen vergeben. Ich habe es jetzt data-icon genannt und da steht der Name meines Entitys. Ich möchte, dass das nicht ausgesprochen wird für screen-reader, deswegen habe ich schon hier aria-hidden=true ergänzt. Und hier ist der eigentliche Screen wieder Text. Und dann sorge ich nur mit CSS dafür, dass das Icon angezeigt wird. Ich spreche hier mein Attribut an und arbeite hier mit erzeugten Inhalten und ergänze vorher das was beim Attribut data-icon steht. Das ist ja dieses UTF-8 Icon. Sage nochmal, es soll nicht gelesen werden, mache ein display: inline-block und eine Schriftgröße. Und dann muss ich nur noch dafür sorgen, dass der Text, der eigentlich sonst sichtbarer, dass der ausgeblendet wird. Und eine Möglichkeit ist das über Position Absolute machen mit einem sehr negativen Wert für Top und Left. Dadurch wird das sozusagen aus dem sichtbaren Bereich geschoben. Dass der Menü-Button so ein bisschen ausschaut wie ein Button, habe ich hier festgelegt. Ich habe auch hier festgelegt, dass der Mauszeiger zum Pointer wird. Das heißt konkret, dass ein Händchen angezeigt wird. Und hier sind so ein paar Kleinigkeiten wie border-radius 50%, wodurch der Hintergrund rund angezeigt wird. Das sind mehr so reine Formatierungen. Entscheidend für die Funktionalität sind diese Zeilen hier nochmal. Also, das Ausblenden der Liste bei kleinen Viewports, hier bin ich ja bei kleinen Viewports. Und das Einblenden, wenn die Klasse toggled-on ergänzt ist. Und das hier sorgt dann für die richtige Darstellung untereinander. Damit ist unser Beispiel fertig. Ich zeige hier nochmal die Funktionalität. Entscheidend ist hier erst einmal, das brauchen Sie für viele Projekte, dass wir mit einer Klasse beim HTML-Element anzeigen lassen, ob JavaScript aktiviert ist oder nicht. Und außerdem typisch, was Sie auch für andere Projekte brauchen können, dass man JavaScript nur nimmt, um Klassen dynamisch hinzuzufügen. Die eigentlichen Formatierungen, das heißt, das Einblenden beziehungsweise Ausblenden geschieht über CSS.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 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!