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)

Weiterleitung der übergeordneten Seite auf das Untermenü

Soll ein Menüpunkt, der Unterseiten hat, selbst nicht verlinkt werden sondern nur die Links zu diesen Unterseiten darstellen, so muss man diesen Menüpunkt mit einem span anstatt eines a wrappen. Hier ein Beispiel, bei dem das für den Hauptmenüpunkt „About Us“ verwendet wird:

Vollständiges Beispiel eines mmenu (Version 8.4.1) mit nicht verlinktem Hauptmenüpunkt

Man beachte, dass das mmenu dann selbsttätig den Trennstrich zu dem Pfeilchen entfernt – schön und sinnvoll.

Das Typoscript bei Verwendung eines HMENU muss dann folgendermaßen modifiziert werden:

...
IFSUB = 1
   IFSUB {
   	doNotLinkIt = 1
   	stdWrap.wrap = <span>|</span>
      	wrapItemAndSub = <li>|</li>
   }
...

Das weitere Typoscript für die Erzeugung eines HMENUs kann man sich bei Bedarf im oben bereits erwähnten alten Beitrag holen.

Link

Animierter Hamburger

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.

Skripte auf der Beispielseite

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.