0

I'm building a (Drupal 7.5) site where I use mmenu (Mobile Sliding Menu) module to create the menu. When I click the trigger, the main menu items appears. Some of the main items have a submenu. When I click the trigger for those submenus, the submenu opens, so far so good.

When I then click another submenu trigger, that submenu opens, but the previously opened submenu stays open as well. What do I need to change to have only ever one submenu open at any one time (i.e. triggering a new submenu closes one that was opened before)? There is no setting for this in the mmenu configuration (drupal module), and no instructions on this on the mmenu website (http://mmenu.frebsite.nl).

Many thanks for any help on this.

1

The easiest method I can think of is to use JS or jQuery to trap the click for every sub-menu item then, onclick, cache a reference to the clicked item, then programmatically close all of the open sub-menus with a loop, skipping the clicked item.

Try something like this:

(function ($, undefined) {

  // Execute once the DOM is loaded.
  $(document).ready(function () {
    // List of expandable sub-menu items.
    var subs = $('.mm-subopen');

    // Iterate through each sub-menu item...
    $(subs).each(function () {

      // Set up onclick handler...
      $(this).click(function () {

        // Cache reference to clicked item.
        var clicked = this;

        // Iterate through list of sub-menu items...
        for(i=0,c=subs.length;i<c;i++) {

          // If current item is not the clicked item...
          if (subs[i] !== clicked) {

            // Get reference to parent <li>, then remove the mm-opened class.
            var parent = $(subs[i]).closest('li');
            $(parent).removeClass('mm-opened');
          }
        }
      });
    });
  });
})(jQuery);

You might need to modify for nested sub-menus, but I hope this helps!

  • I can follow the logic of your code, but am lost when trying to implement it. I tried adding this code to the end of the mmenu.js file (this seems the logical file for this code, as it's full of menu open on click scripts and functions). However, when I do this, the entire menu then stops opening. I assume a bit of the code jars, or maybe naming is wrong. Any ideas how to add this to existing code of mmenu? I can post entire code of mmenu.js if that helps? – xax Oct 10 '16 at 17:14
  • 1
    I usually add custom code in a separate JS file, rather than modifying the existing module's file. You can do this with drupal_add_js(). Also I've edited the code sample to wrap it all in a $(document).ready(), to ensure that the DOM is loaded when the script fires. Are you receiving any errors in the console when using this code? – Beau Oct 11 '16 at 17:10
  • Took your code, pasted it in the mmenu.js after the original closing })(jQuery); statement, and hey presto it works! (All I need to do now is animate this gently and it is state of the art..) – xax Oct 18 '16 at 9:22
  • And obviously I'll go the more elegant separate .JS file route instead of my crude paste at bottom one, but wanted to test.. – xax Oct 18 '16 at 9:38
  • So glad it helped. Cheers! :-) – Beau Oct 19 '16 at 12:16
-1

HTML

<nav>
    <ul>
         <li><a></a></li>
             <ul class="sub-menu">
                 <li><a></a></li>
                 <li><a></a></li>
                 <li><a></a></li>
             </ul>
         </li>
    </ul>
</nav>

CSS

.sub-menu { display: none; }

JQUERY

$("ul > li > a").click(function () {
   var _parent      = $(this).parents("ul");
   var _children    = $(".sub-menu", _parent);
   var _nextElement = $(this).next();

   _children.css({ "display":"none" });
   _nextElement.css({ "display":"block" });

});
  • I am not sure what your answer has to do with the mmenu module that was asked about in the question. You should go into more explanation in your answer to make it easier for others to understand how to work with the mmenu module. – mradcliffe Jun 5 '17 at 17:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.