jquery.mmenu + TYPO3

Question

to use the great mmenu with TYPO3 (v6.2.1) I generate two different menus (TMENUS) with TYPO3: - desktop menu (with opening and closing submenus) - mobile menu (with all levels open at once)

With css media queries I hide the desktop during mobile use and the mobile menu during desktop use. When I open a new page with a mobile device I see the 'naked' list menu for a moment before it is hidden. That's a little bit disturbing, especially when you have a slow connection to the server. Thanks for any ideas to solve the problem.

Answer 1

You should hide a container that is later "consumed" by a script at first so it doesn't popup before your mmmenu is initialized. So e.g. if you have

<ul class="mobile-navigation">

just hide it or its container using CSS

display: none;

Answer 2

here the js code for TYPO3

 /**
 * smartphone / tablet navi
 * http://mmenu.frebsite.nl/
 */
$(document).ready(function() {
    $(".mainMenuSlideLeft").attr("href", "#mainMenuSlideLeft");
    $("#mainMenuSlideLeft").mmenu({
        header: {
            add: true,
            update: true,
            title: "Menü / Startseite",
        },
        offCanvas: {
            position: "left",
            //zposition: "front"
        },
        //onClick: {
        //  preventDefault: true,
        //},
    });
});

Answer 3

I have the conclusion. First you have to create an another menu for the mobile version - with this following script (you can put it in your templavoila.ts)

## Mobilmenu
lib.mobilnavigation = HMENU
lib.mainMenu.entryLevel = 0
lib.mobilnavigation.wrap = <ul id="mobilnavi">|</ul>
lib.mobilnavigation.1 = TMENU
lib.mobilnavigation.1 {
    expAll = 1
    noBlur = 1
    NO {
        subst_elementUid = 1
        ATagTitle.field = abstract // description // title
        ATagParams=id="pid{elementUid}
        ATagBeforeWrap = 1
        allWrap = <li class="mobilnavi-item">|</li>
        linkWrap=<span class="mobilnavi-item hide">|</span>
    }
    IFSUB < .NO
    IFSUB = 1
    IFSUB {
        allWrap = <li class="mobilnavi-item">|
    }
    ACT < .NO
    ACT = 1
    ACT {
        allWrap = <li class="mobilnavi-item active">|</li>
    }
    ACTIFSUB < .NO
    ACTIFSUB = 1
    ACTIFSUB {
        allWrap = <li class="mobilnavi-item active">|
    }
}
lib.mobilnavigation.2 = TMENU
lib.mobilnavigation.2 {
    expAll = 1
    noBlur = 1
    wrap = <ul class="leve_2">|</ul></li>
    NO {
        subst_elementUid = 1
        ATagTitle.field = abstract // description // title
        ATagParams=id="pid{elementUid}
        ATagBeforeWrap = 1
        allWrap = <li>|</li> |*| <li>|</li>
    }
    ACT < .NO
    ACT = 1
    ACT {
        allWrap = <li class="active">|</li> |*| <li class="active">|</li>

Then the mmenu jQuery extension will recognize the mobile menu with its submenus.

My script for the mmenu

(function($){var $mmenu=$('#navigation');$(document).ready(function(){$mmenu.mmenu({isMenu: true,classes: "mm-fullscreen mm-slide mm-black",offCanvas: {moveBackground: false,position: "top",zposition: "front"},searchfield: {add: true,search: true,placeholder: "Suchen",noResults: "Keine Ergebnisse gefunden.",showLinksOnly: true},dragOpen: {open: true}},{classNames: {selected: "active"}}).removeClass('invisible');});})(jQuery);