我试图在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'
}
});