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

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

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

【问题讨论】:

    标签: typo3 mmenu


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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-07-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多