jquery.mmenu how to jump directly to a child page

Question

I'm using the mmenu plugin for jQuery -- http://mmenu.frebsite.nl/

The problem I'm having is that when I initially open the menu, I want it to jump to the page which has the entry best matching the current breadcrumb. Finding the element isn't a problem. For example

Vehicles
    Land
        Cars
        Trains
    Water
        Dingies

I find the with the item I want to display, then do trigger("open.mm") on it.

So if I try to open the "Land" page, it works. It sets "Vehicles" as being opened, and I'm at the page with Cars and Trains.

However if I try to directly open the Cars page, then nothing happens. It sets styles on Land and Cars, but the Vehicles page is still the one that's displayed.

What's the trick to jumping directly to a 3rd level page?

score 0 · Answer 1 · answered Jul 26 '13 at 18:02

I've come up with a workaround. I find the item in the menu I want to open, then walk up the menu tree and record all of the nodes along the way, recoding them in a stack. I think open each menu from the stack in order from the root all the way to the menu I intended to open. There's some visible scrolling of the pages, but it does work.

  // Walk up and build a stack of menu items to open
  var menuToShow: JQuery = this.sideMenu.find("a[href='" + bestUrlMatch + "']").closest("ul");
  var menusToShow: JQuery[] = [];
  do {
      menusToShow.push(menuToShow);
      var linkToParent = menuToShow.find("a.mm-subclose");
      menuToShow = null;
      if (linkToParent.length) {
          var parentId = linkToParent.attr("href");
          menuToShow = this.sideMenu.find(parentId);
          if (menusToShow.length == 0) {
              menusToShow = null;
          }
      }
  } while (menuToShow != null)

  // Open the menu items starting from the root
  do { 
      menuToShow = menusToShow.pop();
      menuToShow.trigger("open.mm");
  } while (menusToShow.length > 0)

Note that I only need to do this when the menu is opened for the first time on the page. I'm not sure if it would work if another sub-menu had already been selected.

score 0 · Answer 2 · answered Jul 27 '13 at 21:08

0

The plugin automatically detects the deepest LI that has the class "Selected", so simply adding that class to the LI would do the trick:

<ul>
  <li>
    <a>Vehicles</a>
    <ul>
      <li>
        <a>Land</a>
        <ul>
          <li class="Selected"><a>Cars</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

In the download pack there is the "horizontal submenus" example page that has a similar setup.

I do agree that the plugin should open all "parent" menus when opening a child menu, but for now I think this would be the best solution.

answered Jul 27 '13 at 21:08

Fred

512
3
6

This almost works. It does open the 3rd level menu, but clicking on the header to go back to the 2nd level doesn't do anything. – GeekyMonkey Jul 29 '13 at 08:51
Really? It seems to be working OK when I make this change to the "horizontal submenus" example in the download pack. – Fred Jul 30 '13 at 13:31
Ok I found the issue. There was a bug in the code that assumed every parent LI to also have class="Selected". New version (3.0.3) can now be downloaded from the website. – Fred Aug 01 '13 at 19:21

jquery.mmenu how to jump directly to a child page

2 Answers2