jquery.mmenu + TYPO3

Question

使用带有TYPO3的伟大mmenu（v6.2.1）我使用TYPO3生成两个不同的菜单（TMENUS）： - 桌面菜单（带有打开和关闭子菜单） - 移动菜单（所有级别一次打开）

使用css媒体查询，我在移动使用期间隐藏桌面，在桌面使用期间隐藏移动菜单。当我用移动设备打开新页面时，我会在隐藏之前看到“裸”列表菜单片刻。这有点令人不安，特别是当你与服务器的连接速度很慢时。 感谢您解决问题的任何想法。

Answer 1

您应该首先隐藏一个稍后被“脚本”使用的容器，这样在初始化mmmenu之前它不会弹出。所以例如如果你有

<ul class="mobile-navigation">

使用CSS

隐藏它或它的容器

display: none;

Answer 2

这里是TYPO3的js代码

 /**
 * 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

我得出结论。首先，您必须为移动版本创建另一个菜单 - 使用以下脚本（您可以将其放在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>

然后mmenu jQuery扩展程序将识别带有子菜单的移动菜单。

我的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);