Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Die responsive Navigation im Überblick

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Die responsive Navigation im Überblick

“

Sie erstellen jetzt Schritt für Schritt eine responsive Navigation für die Übungswebsite und nutzen dabei nach dem Motto All together now viele der bisher gesehenen Techniken in einem zusammenhängenden Beispiel. Ich möchte Ihnen diese Navigation kurz vorstellen. Sie sehen hier in einem schmalen Viewport einen Menübutton, mit dem Wort Menü und 3 waagerechten Strichen davor. Wenn dieser Menüband per Touch oder Klick aktiviert wird, dann kann man damit navigieren. Da werden die Navigationslinks sichtbar und sie bringen den Benutzer und die Benutzerinnen zur gewünschten Seite. Der Menübutton benötigt also einen Träger, einen Auslöser, der dafür sorgt, dass beim Drücken des Buttons die Navigationsliste eingeblendet wird. Und dazu benutzen Sie einen kleinen Schnipsel, JavaScript, der genau das möglich macht. Wenn JavaScript nicht verfügbar ist, dann soll trotzdem die Site navigierbar bleiben. Um das zu simulieren, habe ich hier eine Erweiterung installiert, JavaScript Toggle On and Off, die hier im Chrome es ermöglicht, mit einem Klick JavaScript auszustellen. Das D steht für disabled, jetzt kann ich die Seite neu laden, und Sie sehen, wenn JavaScript deaktiviert ist, wird hier die komplette Navigationsliste angezeigt, und der Menübutton ist nicht sichtbar. Das ist also alles in Ordnung, auch ohne JavaScript ist die Navigation hier bedienbar. In einem breiteren Viewport wird eine horizontale Navigation sichtbar, und dabei spielt JavaScript überhaupt keine Rolle. Die funktioniert also auch sowieso mit deaktiviertem JavaScript. Dieses Bauprinzip nennt man Progressive enhancement oder Schrittweiseverbesserung, und dann sieht man dabei, dass die 3 Sprachen HTML, CSS und JavaScript sich wirklich perfekt ergänzen. Ich lösche jetzt hier einmal den Link zum zentralen Stylesheet, und in dem Moment sehen Sie hier nur noch HTML. Die Navigationsliste mit den Links ist sichtbar und bedienbar. Das ist der Kern des Ganzen. CSS macht die Sache hübscher, und der aktuelle Menüpunkt ist als solcher erkennbar. Und wenn ich jetzt noch JavaScript dazu nehme, dann wird die Sache besser bedienbar und übersichtlicher, denn jetzt habe ich den Menübutton, und die Navigation wird nur bei Bedarf eingeblendet. Progressive enhancement - Schrittweiseverbesserung. Sie erstellen diese responsive Navigation in 7 Schritten. Zunächst überprüfen Sie, ob JavaScript im Browser aktiviert ist. Dann gestalten Sie die mobile Navigation, dann im dritten Schritt fügen Sie den Menübutton im HTML hinzu, denn der ist ja bis jetzt in der Übungswebsite nicht enthalten. Dann wird derselbe Menübutton per CSS gestaltet. Schließlich wird die Navigationsliste per CSS ausgeblendet, so dass man nur noch den Button sieht. Und dann wird es möglich gemacht, mit dem Menübutton diese Navigationsliste wieder einzublenden. Und last but not least wird eine horizontale Navigation für breitere Viewports gestaltet. Soweit zu responsive Navigation im Überblick und los geht's.

Inhalt