Question

我需要使用菜单实现mmenus实例。第一个工作正常（这是惊人的），它位于左侧，但我无法从右侧添加第二个开口。

我需要在固定的顶部栏上添加第二个图标菜单，希望是自定义的，并使用它打开第二个菜单。但是一旦我添加第二个菜单的代码，第一个停止工作，因为图标菜单（在eft侧）打开第二个菜单下面是一些代码。左侧菜单的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

我真的在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元素，将一些文本放在锚元素中，并在this fiddle中按预期工作。我真诚地希望这是你所寻找的:)。

Jquery mmenu多个实例

1 个答案: