jQuery.mmenu ist eine umfangreich konfigurierbare Off-canvas-Navigation. Die Unterseiten können u.a. über einen Slide-Effekt durchgeblättert werden. Hier wurde die jQuery.mmenu-Erweiterung widescreen verwendet, um das Menü bei entsprechender Breite dauerhaft anzuzeigen.
Das HMENU muss nur wenig Klassen vergeben, die meisten setzt das JavaScript des Menüs selbst. Wichtig ist die ID des Menüs (frei wählbar), die bei der Initialisierung des Menüs über jQuery angesprochen wird.
Wenn das Listenelement der aktiven Seite die richtige Klasse erhält (Standard: .Selected, hier angepasst: .active), startet das Menü direkt auf dieser Ebene.
Auch das Trennzeichen des TYPO3-Seitenbaums kann einfach ausgegeben werden – über die (Standard-)Klasse .Divider.
lib.navigation-mmenu = HMENU
lib.navigation-mmenu {
wrap = <nav id="mmenu">|</nav>
1 = TMENU
1 {
expAll = 1
wrap = <ul>|</ul>
NO = 1
NO {
ATagTitle.field = title
wrapItemAndSub = <li>|</li>
// Set 'active' class to shortcuts that link to the current page (e.g. useful when 'Home' is root page):
wrapItemAndSub.override.cObject = COA
wrapItemAndSub.override.cObject {
if {
value = 4
equals.field = doktype
isTrue = 1
isTrue.if {
value.data = TSFE:page|uid
equals.field = shortcut
}
}
10 = TEXT
10.value = <li class="active">|</li>
}
}
CUR < .NO
CUR {
ATagTitle.field = title
// default value for jQuery.mmenu is not 'active', but 'Selected'! See explanation above.
wrapItemAndSub = <li class="active">|</li>
}
IFSUB = 1
IFSUB {
ATagTitle.field = title
wrapItemAndSub = <li>|</li>
}
CURIFSUB < .IFSUB
CURIFSUB {
ATagTitle.field = title
wrapItemAndSub = <li class="active">|</li>
}
SPC = 1
SPC {
wrapItemAndSub = <li class="Divider">|</li>
}
}
2 < .1
3 < .2
4 < .3
}jQuery(document).ready(function ($) {
// fire jQuery.mmenu:
$("#mmenu").mmenu({
// options
"extensions": [
"effect-slide-menu",
"widescreen",
"multiline"
],
navbar: {
title: 'Navigation'
},
"navbars": [
{
"position": "top",
"content": [
"prev",
"title",
"close"
]
}
]
}, {
// configuration
offCanvas: {
menuWrapperSelector: "body",
pageNodetype: "div",
pageSelector: ".c-site-wrapper"
},
classNames: {
selected: "active"
}
});
});