MMenu 紧跟在 body 标记之后

Question

无论如何可以将 MMenu 导航移动到另一个 div 中，并在标题中？由于可访问性，我需要导航直接跟随打开和关闭移动导航的按钮。现在 nav 在开始的 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 标签以避免这些可能的问题。