jquerymmenu

jQuery mmenu v7.0.0 open submenu on menu open


I have an issue with the new version of jQuery mmenu. I've seen solutions that work with the older versions of mmenu but not with this one and I can't find something in the documentation either.

I have a normal menu (device-width bigger than 1024px):

<nav id="menu">
  <ul class="nav-firstlvl">
    <li>
      <a href="/documentation/" title="Documentation">Documentation</a>
    </li>
    <li class="act">
      <a href="/module/" title="Module">Module</a>
      <ul class="nav-secondlvl">
        <li class="act">
          <a href="/module/subpage/" title="Subpage">Subpage</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="/organisation/" title="Organisation">Organisation</a>
      <ul class="nav-secondlvl">
        <li>
          <a href="/organisation/subpage/" title="Subpage">Subpage</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="/contact/" title="Contact">Contact</a>
    </li>
  </ul>
</nav>

which gets cloned by mmenu:

var $menu = jQuery("#menu").mmenu({
               "extensions": [
                  "position-right"
               ]
            }, {
              clone:true
            }
          );

All working just fine. My problem is, I want to open the menu at the submenu if the user is on a page of the submenu (either of the pages "Subpage" of my example). I've tried to add the class "mm-opened" to the list-item of an active submenu-list-item but nothing happened. The menu opened on the first level. Then I realized that with the new version there are different classes and a different structure with the cloned menu in comparison to the older mmenu-version:

<nav id="mm-menu" class="mm-menu mm-menu_offcanvas mm-menu_position-right" aria-hidden="true">
  <div class="mm-panels">
    <div id="mm-0" class="mm-panel mm-panel_has-navbar mm-panel_opened">
      <div class="mm-navbar">
        <a class="mm-navbar__title">Menu</a>
      </div>
      <ul class="nav-firstlvl mm-listview">
        <li class="mm-listitem">
          <a href="/documentation/" title="Documentation">Documentation</a>
        </li>
        <li class="act mm-listitem">
          <a class="mm-btn_next" href="#mm-1">
            <span class="mm-sronly">Open submenu (Module)</span>
          </a>
          <a href="/module/" title="Module">Module</a>
        </li>
        <li class="mm-listitem">
          <a class="mm-btn_next" href="#mm-2">
            <span class="mm-sronly">Open submenu (Organisation)</span>
          </a>
          <a href="/organisation/" title="Organisation">Organisation</a>
        </li>
        <li class="mm-listitem">
          <a href="/contact/" title="Contact">Contact</a>
        </li>
      </ul>
    </div>
    <div id="mm-1" class="mm-panel mm-hidden mm-panel_has-navbar" aria-hidden="true">
      <div class="mm-navbar">
        <a class="mm-btn mm-btn_prev mm-navbar__btn" href="#mm-0" aria-owns="mm-0" aria-haspopup="true">
          <span class="mm-sronly">Close submenu</span>
        </a>
        <a class="mm-navbar__title" href="#mm-0">Module</a>
      </div>
      <ul class="nav-secondlvl mm-listview">
        <li class="act mm-listitem">
          <a href="/module/subpage/" title="Subpage">Subpage</a>
        </li>
      </ul>
    </div>
    <div id="mm-2" class="mm-panel mm-hidden mm-panel_has-navbar" aria-hidden="true">
      <div class="mm-navbar">
        <a class="mm-btn mm-btn_prev mm-navbar__btn" href="#mm-0" aria-owns="mm-0" aria-haspopup="true">
          <span class="mm-sronly">Close submenu</span>
        </a>
        <a class="mm-navbar__title" href="#mm-0">Organisation</a>
      </div>
      <ul class="nav-secondlvl mm-listview">
        <li class="mm-listitem">
          <a href="/organisation/subpage/" title="Subpage">Subpage</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Of course I could add and remove several classes by jQuery but I was wondering if there isn't an easier way to do it like in the version before where you just had to add one class to a list-element and it worked? I can't imagine that they would change from something so easily done to something rather complicated...

Any help, pointers or maybe even a link to the part of the documentation I apparently could not find would be highly appreciated. Thanks

EDIT

I've just realized that the mmenu nav doesn't clone the act-class on the list-item from the normal submenu when cloned. Maybe that's the problem here... Or could this even be a bug?


Solution

  • Ok... I forgot something in the configuration (which I found in the documentation tutorial...)

    I had to change the initialisation configuration of mmenu:

    var $menu = jQuery("#menu").mmenu({
                 "extensions": [
                    "position-right"
                 ]
              }, {
                clone:true,
                classNames: {  // This part was missing...
                  selected: "act"
                }
              }
            );