jquery.mmenu + TYPO3

Question

使用与TYPO3（V6.2.1）大mmenu我产生两个不同的菜单（TMENUS）与TYPO3： - 桌面菜单（与开闭子菜单） - 移动菜单（含各级一次打开）

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

Answer 1

您应该先隐藏一个稍后由脚本“消耗”的容器，以便在您的mmmenu被初始化之前不会弹出。所以例如如果你有

<ul class="mobile-navigation"> 

只是隐藏它或它的容器使用CSS

display: none; 

Answer 2

这里的js代码为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

我的结论。首先，你必须创建移动版本的另一个菜单 - 与此下面的脚本（你可以把它放在你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);