Pulldown- und Mobil-Menü für Contao

contao,tipps&tricks,werkzeuge

Erstellt: 10.08.2014 Lesedauer 1 - 2 Min.

Als eingefleischter Contao-Benutzer habe ich mich für eine Kundenseite (aktuell noch nicht online) mit der Frage beschäftigt, wie ich mit einer CSS-Datei ein Pulldown für normale Seiten und ein Slide-Menü für Mobile-Seiten realisieren kann. Ohne Javascript.

Der Ausschluss von Javascript ist ein sportlicher Aspekt, der von dem Gedanken getrieben ist, dass für einfache Seiten die in rauen Mengen verfügbaren Lösungen auf Grundlage von JQuery und anderen immer dieses ganze Paket saugen. Darüber hinaus gibt es durchaus Leute, die Javascript deaktivieren. Der wesentliche Aspekt war jedoch: Weil man´s kann.

Weil das mit dem Rad zweimal erfinden ziemlich albern ist, habe ich natürlich erst mal gesucht. Für Contao direkt habe ich weder eine Kombilösung noch eine reine CSS-Lösung gefunden, die mir zugesagt hätte. Bei webdesignermag.co.uk habe ich eine Beschreibung gefunden, die recht gut verbindet, was ich vorher gefunden und probiert hatte.

Allerdings muss diese Lösung noch modifiziert werden, damit es in Contao funktionieren kann und einige Wünsche bedient. Die nachfolgend beschriebene Lösung basiert auf folgenden Anforderungen:

Voraussetzungen

Damit das angestrebte Ziel erreicht werden kann, müssen ein paar Vorbereitungen außerhalb der CSS-Datei erledigt werden:

Die reine CSS-Erkennung von Telefonen ist leider außerordentlich unzuverlässig, denn@media-Abfragen liefern bei den Hochauflösenden Smartphones nur bedingt Verwendbares, eine andere Lösung (ohne Javascript) ist mir nicht bekannt.