Jquery Mmenu: Open a submenu

Question

I'm trying to open a submenu from the parent link using the mmenu jquery plugin, and almost got it, but once open the submenu, the function also close the menu (the main menu opened from the left).

I got this:

<nav data-role="navbar" data-iconpos="left" id="leftMenu">
    <ul>
        <li><a id="a_home" href="/" >Home</a></li>
        <li><a id="a_what" href="/" >What to do</a></li>
        <li>
            <a id="a_guides" href="#guidesSubmenu" onclick="$('#leftMenu ul#guidesSubmenu').trigger( 'open.mm' );" >Guides</a>
            <ul id="guidesSubmenu">
                <li><a href="/">Beer Guide 2013</a></li>
                <li><a href="/">Bar Guide 2013</a></li>
                <li><a href="/">Cheap Eats 2013</a></li>
            </ul>
        </li>
        <li>
            <a id="a_sections"  href="#" >Sections</a>
        </li>
    </ul>
</nav>

So, when I click on the Guides link, opens the submenu, but also close the main menu, animating to the right. Anybody knows how is the right way to open a submenu?

This is the plugin page: http://mmenu.frebsite.nl/ Is not a simple jquery javascript.

Thanks.

Answer 1

$('li').hover(function(){

   $('ul',this).slideDown();

},function(){

    $('ul',this).slideUp();

});

Just change the selector with your own li tags class name.I think you can also toggle method.

$('#li').toggle(function() {
  $('ul',this).slideDown();
}, function() {
  $('ul',this).slideUp();
});

Answer 2

The jquery.mmenu plugin automatically appends a "open-submenu"-button to every LI with an UL inside it. If the A doesn't link to an actuall page, all you need to do, is replace it with a SPAN:

<ul>
    <li><span>Guides</span>
        <ul>
            <li><a href="/">Beer Guide 2013</a></li>
        </ul>
    </li>
</ul>

Answer 3

We ran into this exact same scenario today, and after a good amount of research used the following solution (adapted to your situation). It seems like they've changed things around so the data attributes on the elements are not clearly supported, so we moved the initialization to JavaScript.

HTML (did not change):

<nav data-role="navbar" data-iconpos="left" id="leftMenu">
    <ul>
        <li><a id="a_home" href="/" >Home</a></li>
        <li><a id="a_what" href="/" >What to do</a></li>
        <li>
            <a id="a_guides" href="#guidesSubmenu" onclick="$('#leftMenu ul#guidesSubmenu').trigger( 'open.mm' );" >Guides</a>
            <ul id="guidesSubmenu">
                <li><a href="/">Beer Guide 2013</a></li>
                <li><a href="/">Bar Guide 2013</a></li>
                <li><a href="/">Cheap Eats 2013</a></li>
            </ul>
        </li>
        <li>
            <a id="a_sections"  href="#" >Sections</a>
        </li>
    </ul>
</nav>

JavaScript:

<script type="text/javascript">
$(document).ready(function() {
    $("#leftMenu").mmenu({
        onClick: {
            close: false
        }
    });
});
</script>

Specifying the close option as false makes it so it does not close the mmenu when you click on the li, and allows the onclick event handler to open up the sub-menu item.