jQuery.mmenu is a highly customizable Off-canvas navigation. A default feature are the sliding submenus. I added the jQuery.mmenu extension widescreen to permanently show the menu at a certain viewport width.
You only have to assign few classes within the HMENU, as most classes are set by the JavaScript of the menu itself. Be sure to assign the same ID of the navigation which you use during the initialization through jQuery.
If you assign the correct class to the list element of the current page (Default: .Selected, customized here to: .active), the menu starts at this subpage level.
The Spacer page type (SPC) of TYPO3 can be displayed, too. Just use the (default) class .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"
}
});
});