typo3 - jquery.mmenu + TYPO3

Question

在 TYPO3 (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 扩展将识别移动菜单及其子菜单。

我的菜单脚本

(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);