CODEWITHSUNDEEP
jquerymmenu
chris
chris

Reputation: 2243

mmenu: Two menus in one container

Is it possible to have two menus in one jQuery.mmenu-sliding container? In my example the second navigation is removed or hidden. Can this be changed?

The markup would look like this:

<script>
$(document).ready(function(){
  $("#sidebar-offcanvas").mmenu({});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.4/js/jquery.mmenu.min.all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.4/css/jquery.mmenu.min.css" rel="stylesheet"/>

<header>
    HEADER
</header>
<main>
    CONTENT
    <a href="#sidebar-offcanvas">Open the menu</a>

    <div id="sidebar-offcanvas">
        <div id="mainNavi">
            <nav>
                <ul role="menubar">
                    <li><a href="#">Main 1</a></li>
                    <li><a href="#">Main 2</a></li>
                    <li><a href="#">Main 3</a></li>
                </ul>
            </nav>
        </div><!-- /#mainNavi -->
        
        <div id="metaNavi">
            <nav>
                <ul role="menubar">
                    <li><a href="#">Meta 1</a></li>
                    <li><a href="#">Meta 2</a></li>
                    <li><a href="#">Meta 3</a></li>
                </ul>
            </nav>
        </div><!-- /#metaNavi -->
    </div><!-- /#sidebar-offcanvas -->
</main>

<footer>FOOTER</footer

Fiddle: http://jsfiddle.net/up7s9xyn/

Upvotes: 0

Views: 960

Answers (1)

chris
chris

Reputation: 2243

Found the answer myself:

The two menus need to be wrapped into one container:

<div id="sidebar-offcanvas">
    <div class="wrapper">
        <div id="mainNavi">
            <nav>...</nav>
        </div>
        <div id="metaNavi">
            <nav>...</nav>
        </div>
    </div>
</div>

Find the code hier: http://jsfiddle.net/up7s9xyn/1/

Upvotes: 1

Related Questions