Jquery mmenu多个实例

Question

我需要用菜单实现菜单的实例。第一个很好(它太棒了)，它位于左侧，但我无法从右边添加第二个开口。

我需要添加第二个图标菜单，希望定制，在固定顶部栏，并使用它打开第二个菜单。但是，一旦我为第二个菜单添加了代码，第一个菜单就会停止工作，因为图标菜单(在eft端)会在下面的代码下面打开第二个菜单。左边菜单的id是#菜单，右边菜单的id是#listPanel。

<div id="page">
    <div class="header">
        <a href="#menu"></a>
        Event Name 2  - Race Name
        <a href="#listPanel"></a>
    </div>

    <div id="mapContainer">
        <div id="map_canvas"></div>
    </div>

    <div class="footer ">
        Real-time News
    </div>

    <nav id="menu">
        <ul>
            <li><a href="../index.html"><i class="fa fa-home"></i>  Home</a></li>
            <li><a href="index.html"><i class="fa fa-globe"></i>  Map</a></li>                  
            <li><a href="athList.html"><i class="fa fa-list"></i>  Lista Atleti</a></li>
            <li><a href="liveTracking.html"><i class="fa fa-map-marker"></i>  Live Tracking</a></li>
            <li><a href="stops.html"><i class="fa fa-clock-o"></i>  Intermedi</a></li>
            <li><a href="performance.html"><i class="fa fa-dashboard"></i>  Prestazioni</a></li>
            <li><a href="rank.html"><i class="fa fa-list-ol"></i>  Classifica MySdam</a></li>
            <li id="sponsorMenu"><img src="images/sponsor/LogoSM.png" alt="MySdam" width='90%'></li>
        </ul>
    </nav>

    <nav id="listPanel">
        <ul>
            <li><a href="../index.html"><i class="fa fa-home"></i>  Home</a></li>
        </ul>
    </nav>  
</div>

而查询代码是

$(function() {
    $("#menu").mmenu({         
        "offCanvas": {
          "zposition": "front"
       },
       "header": {
          "title": "Menu",
          "add": true,
          "update": true
       },
        "footer": {
          "add": true,
          "title": "Smartrack @ 2014"
       }
    });

    $("#listPanel").mmenu({
       "offCanvas": {
          "zposition": "front",
          "position": "right"
       }
    });  
 });

小提琴

我确实在mmenu站点和堆栈溢出中搜索了很多解决方案，但是我没有找到任何解决方案。我哪里错了？？

谢谢你的支持

Answer 1

我不太明白你到底想做什么。如果只是打开菜单的问题，您可以按如下方式排列HTML：

<div id="page">
    <div class="header">
        <a href="#menu">Menu Left</a>
        <a href="#listPanel">Menu Right</a>
    </div>
    <nav id="menu">
        <ul>
            <li>
                <a href="../index.html"><i class="fa fa-home"></i>  Home</a>
            </li>
            <li>
                <a href="index.html"><i class="fa fa-globe"></i>  Map</a>
            </li>
        </ul>
    </nav>
    <nav id="listPanel">
        <ul>
            <li><a href="../index.html">
                <i class="fa fa-home"></i>  Home</a>
            </li>
        </ul>
    </nav>
</div>

这将添加另一个nav元素，在锚元素中放置一些文本，并按照这把小提琴中的预期工作。我真诚地希望这就是你想要的:)。