How do I edit jQuery.mmenu.js to allow classes (not only IDs) to be targeted?

Question

I'm working on a mobile site and I want to reveal hidden submenus underneath divs like Twitter's mobile site (swipe a tweet to reveal other options). I really like the interface in the jQuery.mmenu.js plug-in, but it's limited to only target IDs and I need to target classes.

I'm sure this is something that was set-up by Fred, which means theoretically it could be changed.

The code can all be downloaded here: http://mmenu.frebsite.nl/

PS. This post is mostly intended for Fred as per his contact requirements, but if anyone can think of a solution I'd love to try it.

He's the creator of the plug-in. I saw his name on the site somewhere. — bholtbholt, Aug 20 '13 at 17:55
In the future, you might not want to direct questions here at specific people. For example, there are ~2400 people with "Fred" in their name on Stack Overflow. Looks like you got the right one, though. — Brad Larson, Aug 20 '13 at 19:15
Totally get that. On his plug-in page he requires any emails for tech-support to be followed up with a Stack Overflow link, probably so if he gets repeat questions he can refer the asker to the link. I was just following his request. — bholtbholt, Aug 20 '13 at 19:21

Mr.Manhattan · Answer 1 · 2013-08-20T07:32:42.657

0

You could just wrap it:

$('.classSelector').each(function(){
   $('#'+this.id).mmenu();
});

...ofc, each object with that class would need to have an id...

if you don't want to give them ids in the html, do this:

var menuCtr = 0;

$('.classSelector').each(function(){
   if(this.id == ''){
     this.id = 'my_mmenu_'+ menuCtr++;
   }
   $('#'+this.id).mmenu();
});

edited Aug 20 '13 at 07:32

answered Aug 20 '13 at 07:26

Mr.Manhattan

5,315
3
22
34

score -1 · Accepted Answer · answered Aug 20 '13 at 13:15

This should work just as well:

$('.classSelector').mmenu();

Only real issue is that the plugin binds the dragging events to the "page". Therefor opening a menu by dragging across the page is limited to one menu per direction ("left","right", "top", "bottom").

I guess it would be relatively easy to change the plugin so it can bind the dragging events to a specified element (via the configuration) with a fallback to the "page". Until that is implemented in the official plugin, try it like this:

for ( var a = 0; a < 10; a++ )
{
    $(".menu" + a).mmenu({
        dragOpen :{
            open: true,
            pageNode: $(".tweet" + a)
        }
    });
}

Open the unminified jquery.mmenu.js file, go to the $.fn.mmenu.dragOpen method (on line 454) and add:

var $dragNode = ( opts.pageNode && opts.pageNode instanceof $ ) ? opts.pageNode : $page;

Go to line 530 and change:

$page.hammer()

into

$dragNode.hammer()

I think that should do the trick.

I've got it kind of working. When I add the for loop the menu is always open, but when I remove the loop the whole page drags over. I'm hoping to add submenus to individual divs. For reference, at 1:38 this video does exactly what I'm looking for: http://youtu.be/PeQxOzE6e_8?t=1m38s — bholtbholt, Aug 20 '13 at 19:01
Behavior like in the video on 1:38 (moving only part of the page out) isn't supported because: a) the plugin always moves the entire page out b) the menu will always be 100% high. — Fred, Aug 20 '13 at 20:46
Maybe it's a feature that could be added sometime in the future? :D — bholtbholt, Aug 21 '13 at 00:55

How do I edit jQuery.mmenu.js to allow classes (not only IDs) to be targeted?

2 Answers2