Menü für responsive Websites mit TYPO3 und jQuery mmenu

Das mmenu ist eine schicke Sache, die wenig Wünsche übrig lässt bezüglich eines sinnvollen, hinreichend coolen und gut zu bedienenden responsive Menüs.

Die hier beschriebene Konfiguration bezieht sich auf folgende Optionen:

  • zum Einsatz kommt das CMS TYPO3
  • das responsive Menü (verfügbar über einen „Hamburger“) soll nur bis zu einer bestimmten Größe angezeigt werden, also nicht auf der Desktop und nicht auf der Tablet Landscape Version.

Zunächst lädt man sich die erforderlichen Sourcen hier herunter. Aus dem Verzeichnis dist/core/css benötigt man die Datei jquery.mmenu.all.css sowie aus dem Verzeichnis dist/core/js die Datei jquery.mmenu.min.js. Beide Dateien werden in das TYPO3 Projekt eingebunden. Selbstverständlich muss auch die jQuery Bibliothek vorhanden sein.

Mmenu benötigt korrekt verschachtelte Listenelemente. Folgendes TypoScript kann für die Generierung des Menüs zum Einsatz kommen:

lib.menu = HMENU
lib.menu.wrap = <nav id="menu">|</nav>
lib.menu.1 = TMENU
lib.menu.1 {
  expAll = 1
  wrap = <ul>|</ul>
  NO {
    wrapItemAndSub = <li>|</li>
  }
  CUR = 1
  CUR {
    wrapItemAndSub = <li class="Selected">|</li>
  }
}
lib.menu.2 < lib.menu.1
lib.menu.3 < lib.menu.1

Die Sache mit dem Selected ist wichtig, da mmenu sonst bei jedem Öffnen des Menüs die Rootseiten anzeigen würde. Wenn man sich auf einer Unterseite befindet, hat man es aber lieber, dass die jeweilige Menübene angezeigt wird – eben das gelingt, wenn das li des aktiven Menüpunkts die Klasse Selected hat.

Der Hamburger, der das mobile Menü öffnen soll, wird mit Hilfe von Font Awesome zum Beispiel so generiert:

<div id="mmenu">
  <a href="#menu"><i class="fa fa-bars" aria-hidden="true"></i></a>
</div>

Wichtig ist also, dass das href als Wert die id des nav Elements bekommt, quasi ein Ankerlink.
Da wir das Hamburger Menü nur bis zu einer bestimmten Größe des Monitors anzeigen wollen, verwenden wir etwa folgendes CSS:

@media (min-width: 769px) {
  #mmenu {
    display:none;
  }
}

Und das Menü, das in der Desktop Variante angezeigt wird, muss mobil versteckt werden, z.B. so:

@media (max-width: 768px) {
  nav#menu {
    display:none;
  }
}

Im Grunde fehlt jetzt nur noch der JavaScript Aufruf:

$(document).ready(function() {
  $("#menu").mmenu({
    // options
  }, {
    // configuration
    clone:true
  });
});

Wichtig in unserem Zusammenhang ist clone:true, das, wie oben vorausgesetzt, dann zum Einsatz kommen muss, wenn es zwei Menüs gibt: eines für die Desktop Version und eines für die mobile Version. Hat man das Menü auf diese Art geklont, kann man die Desktop Variante bequem und einfach per CSS ausblenden.
Hier noch ein paar nützliche CSS Angaben, und zwar um die Hintergrundfarbe des einfahrenden Menüs zu ändern, dem zur Seite geschobenen Teil der Website einen grauen Overlay zu verpassen und um dem aktiven Menüpunkt farblich hervor zu heben:

/* Hintergrund des OffCanvas Menüs */
#mm-menu {
  background:#fff;
}
 
/* Overlay für den verschobenen Content der Website */
#mm-blocker {
  background:rgba(0,0,0,0.3) !important;
}
 
/* Highlight des aktiven Menüpunkts */
.mm-selected a {
  color:#006AB2 !important;
}

Fallstricke:
Mit

config.prefixLocalAnchors = all

ergibt sich das Problem, dass der Ankerlink zum Menü umgeschrieben wird, mithin funktioniert das Menü nicht. Einzige, derzeitige Lösung: config.prefixLocalAnchors = all ausschalten.

Etliche weitere Optionen sowie Plugins fürs Styling findet man auf der Website des Entwicklers – ebenso auch den Hinweis, dass eine geringfügige Zahlung erforderlich ist, wenn man das Plugin im kommerziellen Bereich einsetzen möchte.