Pulldown- und Mobil-Menü für Contao

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:

  • Die Kopfzeile mit dem Kundenlogo soll immer sichtbar sein.
  • Das Pulldown-Menü soll sich unter dem Kundenlogo befinden, damit die Menüs in den Text statt über das Logo ausklappen.
  • Es genügt eine weitere Hierarchie-Stufe, also einmal ausklappen.
  • Die Umschaltung auf das Slide-Menü soll sowohl auf Telefonen als auch im PC- und Tablet-Browser bei einer Breite kleiner 48em aktiviert sein.
  • Auf Tablets soll das Slide-Menü immer verwendet werden, weil „Hover“ per Touch-Bedienung sehr flinke Finger erfordert.
  • Es soll auf allen aktuellen „großen“ Browsern (Opera, Firefox, Chrome, Internet Explorer) funktionieren.

Voraussetzungen

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

  • Installation der Contao-Erweiterung mobiledetection, damit die Telefonerkennung souverän funktioniert. 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.
  • Erweiterung des Seitentemplates mit einer Checkbox im DIV Container (direkt darunter):
<input id="menu-toggle" class="menu-toggle" type="checkbox">
  • Anlegen eines HTML-Frontend-Moduls für das Aufklappen des Slide-Menüs:
     <div class="mobilemenu">
          <label for="menu-toggle" id="toggle">≡ Mehr…</label> 
     </div>
  • Anlegen eines Seitenlayouts mit einer linken Spalte für das Menü.
  • Einfügen des HTML-Frontend-Moduls an die oberste Position in der Hauptspalte
  • Erweiterung der Meta-Einträge des Layouts mit einer Viewport-Einstellung:
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">