使用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' 
     } 
    }); 
});