使用Bootstrap 3实施Mmenu

debugcn 发表于 Dev

温顺

我正在尝试将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在这里。

温顺

因此，我最终只是像这样克隆了我的左侧导航：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'
        }
    });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。