使用Bootstrap实现Mmenu 3

Question

我试图在Bootstrap站点的左侧菜单中添加Mmenu。这种工作，但只有当我有两个版本的左侧菜单在HTML中。

这似乎是一个丛生的方法。它可以以其他方式完成，以便我可以将左侧菜单保留在一个地方吗？

<div id="page"> 
    <div class="navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <a href="#" class="navbar-brand hidden-xs"><strong>COMPANY LOGO</strong></a> 
       <!--Button --> 
       <div id="header" class=" visible-xs"> 
        <a href="#menu-left"></a> 
        COMPANY LOGO 
       </div> 
       <!-- //Button --> 
      </div> 
     </div> 
    </div> 

    <div class="container"> 
     <div class="padd-content"></div> 
     <div class="col-sm-4 hidden-xs" role="navigation"> 
     <!-- Left Navigation on desktop (default Bootstrap) --> 
      <div class="list-group"> 
       <a href="#" class="list-group-item">Home</a> 
       <a href="#" class="list-group-item">Link 1</a> 
       <a href="#" class="list-group-item">Link 2</a> 
       <a href="#" class="list-group-item">Link 1</a> 
      </div> 
     </div> 
     <!-- // Left Navigation on desktop (default Bootstrap) --> 
     <div class="col-sm-8"> 
      <h2>Heading 1</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, dolorem, amet, sit accusantium aperiam adipisci deleniti iure soluta officiis eligendi earum velit itaque totam rem distinctio culpa laborum. Aliquid, alias, doloremque, 
       dicta sed natus recusandae fuga cum rerum quaerat explicabo nostrum quis eaque iste facere corporis soluta earum veniam voluptatem quasi possimus minima modi fugiat repudiandae blanditiis ducimus dignissimos ea nam? Asperiores, quo suscipit 
       similique consequatur facilis veniam distinctio quasi necessitatibus ducimus alias pariatur in eum aliquam eveniet tenetur sapiente nostrum corporis delectus facere rem sed illo perferendis perspiciatis. Asperiores, ad, fugiat.</p> 
     </div> 
    </div> 

    <!-- Left Navigation on SMALL screens (mmenu) --> 
    <nav id="menu-left"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Link 1</a> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 2</a></li> 
        <li><a href="#">Link 3</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
     </ul> 
    </nav> 
    <!-- // Left Navigation on SMALL screens (mmenu) --> 
</div> 

我的JS是这样的：

var $menu = $("#menu-left"); 
$($menu).mmenu({ 
'offCanvas': { 
'position': 'left' 
} 
}); 

Jsfiddle here。

Answer 1

所以，我最终只克隆我的左侧导航这样的： HTML：

<div id="page"> 
    <div class="navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <a href="#" class="navbar-brand hidden-xs"><strong>COMPANY LOGO</strong></a> 
       <!--Button --> 
       <div id="header" class=" visible-xs"> 
        <a href="#menu-left"></a> 
        COMPANY LOGO 
       </div> 
       <!-- //Button --> 
      </div> 
     </div> 
    </div> 

    <div class="container"> 
     <div class="padd-content"></div> 
     <div class="col-sm-4 hidden-xs" role="navigation"> 
     <!-- Left Navigation on desktop (default Bootstrap) --> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Link 1</a> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 2</a></li> 
        <li><a href="#">Link 3</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
     </ul> 
     </div> 
     <!-- // Left Navigation on desktop (default Bootstrap) --> 
     <div class="col-sm-8"> 
      <h2>Heading 1</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, dolorem, amet, sit accusantium aperiam adipisci deleniti iure soluta officiis eligendi earum velit itaque totam rem distinctio culpa laborum. Aliquid, alias, doloremque, 
       dicta sed natus recusandae fuga cum rerum quaerat explicabo nostrum quis eaque iste facere corporis soluta earum veniam voluptatem quasi possimus minima modi fugiat repudiandae blanditiis ducimus dignissimos ea nam? Asperiores, quo suscipit 
       similique consequatur facilis veniam distinctio quasi necessitatibus ducimus alias pariatur in eum aliquam eveniet tenetur sapiente nostrum corporis delectus facere rem sed illo perferendis perspiciatis. Asperiores, ad, fugiat.</p> 
     </div> 
    </div> 

    <!-- Left Navigation on SMALL screens (mmenu) --> 
    <nav id="menu-left"></nav> 
    <!-- // Left Navigation on SMALL screens (mmenu) --> 
</div> 

和JS：

$(function() { 
    var $leftmenu = $('#leftmenu'); 
    var $mobimenu = $('#mobile-leftmenu'); 
    var $items = $leftmenu.clone(); 
    $mobimenu.append($items); 
    $mobimenu.mmenu({ 
     'offCanvas': { 
      position: 'left', 
      zposition: 'front' 
     } 
    }); 
});