MMenu紧跟在body标签之后

Question

​

有没有办法将MMenu导航移动到另一个标题中的div中？由于可访问性，我需要导航直接跟随打开和关闭移动导航的按钮。现在，导航被插入在开始的body标签之后。

​

    $("#mmenu").mmenu({
        // options
        offCanvas: {
            position: "right"
        },
        navbars: [
            {
                position: "top",
                height: 1,
                content: [
                    mmenuBookingHtml
                ]
            },
            {
                position: "bottom",
                height: 1,
                content: [
                    mmenuSocialHtml
                ]
            },
            {
                position: "bottom",
                height: 1,
                content: [
                    mmenuPhoneHtml
                ]
            },
            {
                position: "bottom",
                height: 1,
                content: [
                    mmenuSearchHtml
                ]
            }
        ]
    }, {
        // configuration
        offCanvas: {
            pageSelector: ".body-overlay"
        }
    });

                <a class="toggle-mmenu" href="#mmenu" aria-control="#mmenu" aria-expanded="false">
                    <span class="toggle-mmenu__wrap">
                        <span class="toggle-mmenu__bar"></span>
                        <span class="toggle-mmenu__bar"></span>
                        <span class="toggle-mmenu__bar"></span>
                    </span>
                </a>
<?php get_template_part('nav', 'mobile'); ?>

​

Answer 1

MMenu有一个config option

menu: {
    insertMethod: 'prepend',
    insertSelector: 'body'
}

这告诉它将它放在HTML BODY标记的前面。它没有列在explained config options中，但存在于source code中。正如您在source code on line 53中所看到的，它使用此insertSelector来挑选要在其附近注入菜单HTML的标记或类。您应该能够使用一个新的insertSelector选项传入一组配置选项，或者在最坏的情况下，修改您的源JS以硬编码一个新的选择器，让它注入到您想要的位置。

但是，这样做可能会使菜单不稳定。菜单使用固定的CSS定位。将其放入另一个同样具有固定或绝对定位的CSS中可能意味着菜单出现在一个奇怪的位置，或者行为异常，因为它现在继承了父容器的CSS和定位。如果不对其进行测试(如果看不到站点上所有的CSS以及它与菜单的CSS是如何交互的)，就无法判断。但是你可以试着看看它是否适合你的情况。我假设他们把它放在BODY标签的前面，以避免这些可能的问题。