Jquery菜单多实例

Question

我需要使用菜单来实现 mmenus 实例。第一个工作正常(太棒了)，它位于左侧，但我无法从右侧添加第二个开口。

我需要在固定顶栏上添加第二个图标菜单(希望是自定义的)，并使用它打开第二个菜单。但是，一旦我添加第二个菜单的代码，第一个菜单就会停止工作，因为图标菜单(在左侧)打开第二个菜单 下面是一些代码。左侧菜单的id为#menu，右侧菜单的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"
       }
    });  
 });

Fiddle

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

感谢支持

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>

这会添加另一个导航元素，在 anchor 元素中放置一些文本，并按 this fiddle 中的预期工作。 。我真诚地希望这就是您正在寻找的:)。