Meek Meek - 3 months ago 24
CSS Question

Implement Mmenu with Bootstrap 3

I'm trying to add Mmenu to my left menu in a Bootstrap site. It kind of works, but only if I have two versions of my left menu in the html.

That seems like a clumpsy approach. Can it be done in another way, so that I can maintain the left menu in one place?

<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>


My js is this:

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


Jsfiddle here.

Answer

So, I ended up just cloning my left navigation like this: 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>

and js:

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