Mobiles Menü mit mmenu

Das mmenu habe ich mal so beschrieben: „…ist eine schicke Sache, die wenig Wünsche übrig lässt bezüglich eines sinnvollen, hinreichend coolen und gut zu bedienenden responsive Menüs.“

Was die Einbindung in TYPO3 angeht so kann der alte Beitrag immer noch gute Dienste leisten. Neu und anders geworden ist über die Jahre jedoch die Konfiguration des mmenu. Ich habe hier eine Beispielseite aufgebaut, die folgendes bietet:

  • Ein „Mehrebenenmenü“, das sich bei Mouseover aufklappt und auf einem Touchscreen wie folgt funktioniert: erster Klick -> Öffnen des Untermenüs (sofern vorhanden); zweiter Klick -> Link zum Menüpunkt,
  • animierter Burger, der sich bei einer Größe von 768 Pixel und kleiner anstelle des Menüs einblendet,
  • „Black Theme“ für das mmenu,
  • Social Media Buttons im mmenu unten,
  • die Überschrift im mmenu heißt Menü (statt Menu).

Vollständiges Beispiel eines mmenu (Version 8.4.1)

Zusätzlich zu den Sourcen des mmenu (https://mmenujs.com/download.html) habe ich in meinem Beispiel noch die Font Awesome Bibliothek (4.7) eingebunden und das CSS für die animierten Burger (https://github.com/FrDH/mburger-css). Weiterhin verwende ich einen JQuery Code um das oben beschriebene Prozedere für touch devices zu erzeugen.

Die Javascripte können dem Quelltext der Beispielseite entnommen werden. Das alles soll lediglich als Beispiel oder Anregung dienen, wie man es machen kann. Wer möchte, möge sich bedienen 😉
Noch ein Hinweis zum mmenu: zur Verwendung kommen diese (unveränderten) Dateien aus dem Downloadpaket: dist/mmenu.js, dist/mmenu.polyfills.js und dist/mmenu.css. Die demo.css wurde erheblich angepasst.

Achtung: das mmenu ist nicht Open source. Für die kommerzielle Verwendung ist eine Lizenz erforderlich (s. Downloadlink).

Achtung 2: In der Version 8.4.0 des mmenu gab es ein Problem mit dem viewport. Wen das interessiert kann sich hier darüber informieren.