用 Bootstrap 3 实现 Mmenu

Question

我正在尝试将 Mmenu 添加到我在 Bootstrap 站点的左侧菜单中。它有点工作，但前提是我在 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'
        }
    });
});

用 Bootstrap 3 实现 Mmenu

Implement Mmenu with Bootstrap 3

jquery

css

twitter-bootstrap

mmenu