Referenzen

Jimdo: responsives Layout mit Off-Canvas Menü

Anfang März bekam ich von Senmotic Barfußschuhe den Folgeauftrag einen Relaunch im responsiven Layout zu planen und bis spätestens Mitte April umzusetzen. Hintergrund war das Google zum 21. April 2015 angekündigt hat, dass die Optimierung für Mobilgeräte als Rankingsignal für mobile Suchanfragen gewertet wird. Und mit dem iPhone 6 nimmt die Wahrscheinlichkeit auch langsam zu, dass wirklich online bestellt wird ;-) .


Die große Herausforderung bestand darin das bebilderte Menü des OnlineShops in der mobilen Version unterzubringen.

Die Lösung des Problems: ein Off Canvas Menü. Und mit der Lösungsfindung ergaben sich die nächsten Probleme. Nachdem ich mir den Stand der aktuellen Technik erarbeitet hatte und die Premium-Lösung von David Bushell (Demo 2) mit minimalen JS (für progressives Enhancement) in Jimdo integriert hatte, fehlte der Platz für die Bilder.

 

Die Lösung des neuen und alten Problems: ein Off Canvas Menü mit Multi Levels.

Links im Bild wird die mobile Startseite angezeigt. Nach Klick auf den roten Hamburger Menübutton oben links, öffnet sich ein Menübereich.


Die Lösung basiert auf einem "Lightweight Off-canvas Multi-level menu with CSS transitions" von codepen.io. Allerdings dient die dortige verfügbare Version nur als Grundlage und muss gegebenenfalls noch ergänzt werden.


Zu guter Letzt noch ein paar Screenshots von verschiedenen Devices.

Kommentar schreiben

Kommentare: 0