jquery.mmenu + TYPO3答案

【问题标题】：jquery.mmenu + TYPO3jquery.mmenu + TYPO3
【发布时间】：2014-04-27 22:38:15
【问题描述】：

为了在 TYPO3 (v6.2.1) 中使用出色的菜单，我使用 TYPO3 生成了两个不同的菜单 (TMENUS)： - 桌面菜单（带有打开和关闭子菜单） - 移动菜单（同时打开所有级别）

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

【问题讨论】：

【解决方案1】：

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

<ul class="mobile-navigation">

使用 CSS 隐藏它或其容器

display: none;

【讨论】：

谢谢；我在菜单 div 中添加了第二个类来隐藏它，然后弹出窗口停止了。
那么成功了吗？如果是这样，请接受答案:-)。

【解决方案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&uuml; / Startseite",
        },
        offCanvas: {
            position: "left",
            //zposition: "front"
        },
        //onClick: {
        //  preventDefault: true,
        //},
    });
});

【讨论】：

您介意为您的答案添加一些解释吗？以便其他（经验较少的）读者可以轻松理解您的工作和方式？

【解决方案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);

【讨论】：