typo3 - jquery.mmenu + TYPO3

Question

TYPO3 (v6.2.1) で優れた mmenu を使用するには、TYPO3 で 2 つの異なるメニュー (TMENUS) を生成します: - デスクトップメニュー (サブメニューの開閉を含む) - モバイルメニュー (すべてのレベルを一度に開く)

css メディアクエリを使用して、モバイル使用時にはデスクトップを非表示にし、デスクトップ使用時にはモバイルメニューを非表示にします。モバイルデバイスで新しいページを開くと、非表示になる前に「裸の」リストメニューが一瞬表示されます。特にサーバーへの接続が遅い場合は、少し気がかりです。問題を解決するためのアイデアをありがとう。

score 1 · Accepted Answer

mmmenu が初期化される前にコンテナがポップアップしないように、後でスクリプトによって「消費」されるコンテナを非表示にする必要があります。たとえば、持っている場合

<ul class="mobile-navigation">

CSSを使用してそれまたはそのコンテナを非表示にするだけです

display: none;

score 0 · Accepted Answer

ここに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,
        //},
    });
});

score 0 · Accepted Answer

結論が出ました。最初に、モバイルバージョン用の別のメニューを作成する必要があります。次のスクリプトを使用します (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);

typo3 - jquery.mmenu + TYPO3

3 に答える 3

Related

Reference