Responsive Webdesign – Grundlagen

Fertige Navigationslösungen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Es gibt eine große Anzahl fertiger Lösungen für Responsive Navigation. Dieser Film zeigt ein paar Beispiele an und erklärt, worauf Sie bei der Auswahl achten sollten.

Transkript

Es gibt eine große Anzahl an fertigen Lösungen für responsive Navigationen. In diesem Film sehen wir uns ein paar Beispiele an. Ich habe ein sehr schönes Beispiel, das ist der PageSlider. Zeige einmal wie das funktioniert. So schaut es auf dem großen Viewport aus. Und wenn ich es hier kleiner mache, dann ist nur noch so ein Icon zu sehen und wenn ich hier draufklicke, wird dieser Teil reingeschoben und ich kann wieder rausschieben. Eine sehr schöne Funktionalität. Ist hier auch beschrieben wie das Ganze funktioniert. Also, was man machen muss, kann man herunterladen. Diese Lösung hat derzeit aber einen kleinen Nachteil. Eigentlich ist es nämlich wichtig, dass die Navigationspunkte immer erreichbar sind, auch wenn JavaScript mal deaktiviert sein sollte. Und wenn wir das hier einmal testen, dann sehen wir hier bei großem Bildschirm, das funktioniert. Hier wieder diese Anzeige des Buttons. Aber wenn ich jetzt hier draufklicke bei deaktiviertem JavaScript, geschieht überhaupt nichts. Und das ist natürlich unschön. So, es ist ja immer die Frage, müssen wir solche Fälle auch berücksichtigen? Aber wenn Sie die Wahl haben, es ist auf jeden Fall besser, dass das Ganze so solide aufgebaut ist, dass zumindest immer alle Inhalte und alle Navigationen auch ohne JavaScript erreichbar sind, weil Sie damit auch sicherstellen, dass auf irgendwelchen Uraltgeräten das auch funktioniert. Ein anderes Beispiel, wo dieses Problem nicht auftritt, ist dieses hier, Responsive Nav. Ich zeige das mal hier. Also, hier haben wir so eine Toggle-Funktionalität. Das war eben aufgeklappt, weil ich da schon mal da war. Ganz hübsch gemacht, auch so schön animiert. Und wenn ich hier einmal JavaScript deaktiviere und nochmal neu lade und dann gehe ich wieder an die andere Ansicht, dann ist einfach automatisch die Navigation hier angezeigt. Wir haben natürlich keinen Effekt durch den Klick auf den Button. Den könnte man dann auch ausblenden, aber es funktioniert prinzipiell. Deswegen ist es eine schöne Lösung. Wir wollen uns mal anschauen wie man so etwas dann einsetzt. Vorher immer wichtig, wenn Sie solche Tests machen, wo Sie JavaScript deaktivieren, dass Sie immer daran denken es wieder zu aktivieren, sonst wundern Sie sich warum irgendwelche Effekte nicht gehen. Gehen wir mal hier zur Web-Seite des Projektes. Da finden Sie dann die ganzen Download-Dateien. Wichtig ist zum Einen eine CSS-Datei und eine JavaScript-Datei. Diese JavaScript-Datei gibt es in zwei Varianten, für den echten Einsatz natürlich die minifizierte Variante - die Richtige. Hier wird dann erklärt wie das Ganze funktioniert. Es gibt auch Demos, die man sich anschauen kann. Vom Grundprinzip ist es folgendermaßen: wir müssen auf das Stylesheet verweisen und wir müssen auf die JavaScript-Datei verweisen. Dann brauchen wir folgendes Markup, das heißt ein Element mit einer ID, um die Navigation auszuwählen und da drinnen ist eine ungeordnete Liste. Und dann brauchen wir ein bisschen Code, um die Navigation als Funktionalität auch wirklich zu starten. Sehen wir uns das einmal hier in der Praxis an. Ich habe hier schon ein kleines Dokument vorbereitet mit nur minimalen Formatierungen, ohne wirklich viel zu machen. Hier verweise ich jetzt auf die benötigte CSS-Datei, die ich natürlich vorher heruntergeladen habe. Dann verweise ich hier auf die JavaScript-Datei, die ich auch vorher heruntergeladen habe und im selbem Verzeichnis abgespeichert habe. Ich könnte natürlich das auch in einen Unterordner tun. Dann habe ich hier den HTML-Code für mein Menü und ein bisschen anderen Text. Und ganz am Ende, also, vor dem Body schließenden Tag sollen wir diese Zeile hier einfügen und das mache ich auch. Und hier muss ich die ID übergeben, die ich auch hier angegeben habe, also Nav im Beispiel. Wenn ich das jetzt hier einmal ausführe, dann sehen Sie, das ist die Anzeige auf großen Viewports. Und das schaltet dann um, dann erscheint ein Button Menu. Und wenn ich draufklicke, kommt das Menüfenster so rein. Hier kann ich es ein- und ausblenden. Es ist alles natürlich noch ganz unformatiert. Jetzt gibt es verschiedene Sachen bei der Konfiguration, die man machen kann. Das finden Sie dann auch hier auf der Web-Seite des Projektes beschrieben, was man hier alles machen kann. Und ich habe das im Beispiel auch mal vorbereitet, das heißt, diesen ersten Teil kommentiere ich einmal aus. Und hier gehe ich zum zweiten Teil. Das heißt, wenn Sie diese Navigation aufrufen, können Sie hier in geschweiften Klammern auch noch Konfigurationen angeben. Können zum Beispiel festlegen, ob überhaupt eine Animation stattfinden soll, Sie können bestimmen wie lange die dauern soll. Was ich jetzt hier ändern wollte, war zum Einen, soll die Beschriftung des Menüs nicht Menu Englisch sein, sondern Deutsch Menü. Und außerdem möchte ich, dass das Ganze davor eingefügt wird. Wenn wir das hier mal speichern und uns anschauen, dann sehen Sie, dass die Änderungen jetzt hier erfolgt sind, also hier schaut es wieder großer Bildschirm, jetzt Menü erscheint, das habe ich ja geändert. Und dann kommt die Navigation darunter, also der Menü-Button ist davor. Auf diese Art können Sie hier grundlegende Funktionalitäten vornehmen und dann kann man natürlich auch hingehen und das Ganze formatieren. Was mir an dieser Lösung gut gefällt, ist dass zum Einen sie auch funktioniert bei deaktiviertem JavaScript, was ein wichtiger Punkt ist für irgendwelche Feature-Phones oder schlechte alte Handys. Und zum Anderen gefällt mir auch sehr gut, dass die Animation eigentlich nicht über JavaScript gemacht wird, sondern über CSS. Und das sieht man beispielsweise auch was hier geschieht, wenn man sich den Firebug einmal einblenden lässt. Wie hier lasse ich jetzt nach rechts einblenden, dann sieht man das hier besser. Und Sie sehen dann auch, dass hier inline Style-Angaben ergänzt werden. Und Sie sehen hier, es ist eine Transition. Also, diese Animation geht nicht über JavaScript, sondern über CSS. Es gibt viele Lösungen im Web, fertige Lösungen für responsive Navigationen und das werden natürlich immer mehr. Vor einem echten Einsatz sollten sie die immer genügend testen. Wichtig ist beispielsweise der Punkt, dass die Grundfunktionalität auch gegeben ist, wenn JavaScript deaktiviert ist.

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...
 
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
ISBN-Nummer:978-3-99032-060-0
Erscheinungsdatum:10.09.2013
Aktualisiert am:26.09.2016
Laufzeit:5 Std. 47 min (59 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!