Joomla Modul – Minimal Responsive Menu

Vorgeschichte: Da unsere Kundenwebsites ausschließlich im responsive Design erstellt werden und oft eigens geschriebene Templates verwenden, habe ich lange Zeit nach einem Modul für die Hauptnavigation gesucht, was folgende Punkte vereint:

  1. Darstellung der Menüeinträge als einfache Liste ohne dutzende Wrapper, wie im Standard Joomla Modul
  2. Einfaches Einbinden eines Modules (nicht noch ein zusätzliches, verstecktes Menü)
  3. Einfache optische Anpassung möglich (ohne große Veränderungen im Modul selbst oder 1000 !important Regeln im CSS)
  4. Geringer Einfluss auf die Ladezeit (wenige Requests, geringe Größe)

Ein fertiges Modul was dem relativ nahe kommt, ist das Menü von TheGrue. Problematisch fand ich daran aber den großen Funktionsumfang. Das Modul ist ready-to-use und bietet viele Anpassungsmöglichkeiten im Backend, zu viele für meinen Geschmack (und das harmoniert nicht mit Punkt 3 in meinen Ansprüchen).

Simple Responsive Menu – Joomla-Modul

Blieb also nur noch der Ausweg selbst ein Modul zu schreiben. Gesagt getan: Ich habe das Standard Joomla Modul (mod_menu) nach meinen Vorstellungen angepasst, ohne dass es sich anders verhält als das Original. Für ein optisch ansprechendes responsive Menü habe ich analog zu TheGrue das jQuery Plugin SIDR benutzt.

Normale Ansicht des Menüs auf einem Desktop-PC
Normale Ansicht des Menüs auf einem Desktop-PC
Mobiles (responsive) Menü geöffnet
Ansicht mit geöffnetem mobilem Menü

Funktionsumfang:

  • Alle Einstellungsmöglichkeiten des klassischen Moduls
  • Breite, ab der das mobile Menü angezeigt werden soll, einstellbar
  • Laden eines einzelnen Moduls für die normale und responsive Navigation
  • Keine versteckten Menüs –  somit barriefrei und suchmascheinenfreundlich, da doppelte Links vermieden werden
  • Geringer Einfluss auf die Ladezeit: 2 Requests, ca. 11,3kb unkomprimiert, kein Abruf externer Dateien. (jQuery muss geladen sein)
  • Das Laden der JavaScript und CSS-Dateien lässt sich in den Einstellungen unterbinden, wenn gewünscht. (Inhalte der Dateien müssen dann ins Template übernommen werden)
  • Einfaches bearbeiten der Optik, da nur wenige Style-Regeln definiert wurden

Das Modul kann hier heruntergeladen werden: mod_simpleresponsivemenu

GitHub und Demo folgen demnächst.