mmenu：一个容器中的两个菜单

Question

是否可以在一个 jQuery.mmenu 滑动容器中包含两个菜单？在我的示例中，第二个导航被删除或隐藏。这可以更改吗？

标记如下所示：

<script>
$(document).ready(function(){
  $("#sidebar-offcanvas").mmenu({});
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.4/js/jquery.mmenu.min.all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.4/css/jquery.mmenu.min.css" rel="stylesheet"/>

<header>
    HEADER
</header>
<main>
    CONTENT
    <a href="#sidebar-offcanvas">Open the menu</a>

    <div id="sidebar-offcanvas">
        <div id="mainNavi">
            <nav>
                <ul role="menubar">
                    <li><a href="#">Main 1</a></li>
                    <li><a href="#">Main 2</a></li>
                    <li><a href="#">Main 3</a></li>
                </ul>
            </nav>
        </div><!-- /#mainNavi -->
        
        <div id="metaNavi">
            <nav>
                <ul role="menubar">
                    <li><a href="#">Meta 1</a></li>
                    <li><a href="#">Meta 2</a></li>
                    <li><a href="#">Meta 3</a></li>
                </ul>
            </nav>
        </div><!-- /#metaNavi -->
    </div><!-- /#sidebar-offcanvas -->
</main>

<footer>FOOTER</footer

Fiddle: http://jsfiddle.net/up7s9xyn/

Answer 1

自己找到答案：

两个菜单需要打包到一个容器中：

<div id="sidebar-offcanvas">
    <div class="wrapper">
        <div id="mainNavi">
            <nav>...</nav>
        </div>
        <div id="metaNavi">
            <nav>...</nav>
        </div>
    </div>
</div>

找到代码层次： http://jsfiddle.net/up7s9xyn/1/

mmenu：一个容器中的两个菜单

mmenu: Two menus in one container

jquery

mmenu