Multi-level push menu support

Love that style. I planned on adding it, but stopped due to lack of time. Nice find on the forked version, many improvements.

Yes, you could write it as your own module and/or straight into RM itself (since the plan is to officially support this one). I would commit a patch adding this style in a heartbeat :)

To add to your module

(These steps would essentially be the same for adding straight into RM, so if you did this we could easily incorporate it into the main module with minimal effort).

This will involve adding 3 functions in the module, and an "integration" javascript file.
The "integration" JS file makes whatever changes should happen to the structure of HTML and/or triggering events, calling functions that the menu library requires (example: The MeanMenu style calling: $(this).meanmenu() after preparations are made, to trigger the library). MeanMenu's integration file here as example:
http://cgit.drupalcode.org/responsive_menus/tree/styles/meanMenu/respons...

Look at the .api.php file in the root of Responsive Menus, or here is a link to the file on Drupal's git server:
http://cgit.drupalcode.org/responsive_menus/tree/responsive_menus.api.ph...

The first 3 functions are what you will need (renamed accordingly), the names for the latter 2 are defined in the first (style_info). The functions are (barring name changes):

• hook_responsive_menus_style_info(): Defines the style to RM.
• example_style_settings(): Drupal FAPI style array for the settings form for this style. The name of this function is defined in hook_responsive_menus_style_info().
• example_style_js_settings(): Array that is passed to the JS integration file. (See the MeanMenu integration file above to see how the values come through) -- you'll want to iterate over settings.responsive_menus in the JS, which is dealing with the case of multiple RM instances on 1 page. The name of this function is defined in hook_responsive_menus_style_info().

Sweet progress on that forked version, I'd go with that one! http://multi-level-push-menu.make.rs/

Wonderful to see someone pick it up and carry it from there (as is the intention for many of things of this nature posted on codrops -- example to run with).

I know that is a lot of info to absorb. Don't hesitate to ask any questions, I'm very excited at the prospect of this style making it into RM.

+1 I would love to see this one in there too!

Turns out I need to use this for my companies new web site.

I will try to develop it right in the module and submit a patch.

And you shall be a hero among Drupal.
They shall chant your name "geekygnr! geekygnr! geekygnr! "
None shall forget the glory of that day, when geekygnr added Multi-level push menu support.

So what your saying is no pressure?

No pressure :)

I have been working on this and some credit goes to my co-worker harsimrat who set up the initial static html model for me to work from (I am not that great at frontend dev).

Attached is a patch that has the basics to make it work. The defaults I set on the options are so it will work with the bartik theme. The only part that is broken is I am having some trouble over-riding the css from the bartik theme. The bartik theme main-menu also doesn't include the full menu tree. I tested it by using a fully expanded menu in the main-menu block.

There are a lot more options that need to be added on the form and the Readme needs help but this should be a good starting point from some collaboration and team work. I will likely have more changes in the future as this gets folded into our project.

@geekygnr You might be my new favorite person.

I will try to carve out some time this weekend to test this out and see if there are any features I can help out with.

@drastik, I have already found some problems with my initial patch.

I have made some progress on them. I will try to put up a new patch before I finish work tomorrow.

@geekygnr, Any info you can provide on issues you had? I'm about to test this out.

@drastik

Sorry my post-it reminder failed me Friday and I was out of town all weekend.

Here is a new patch that has some more exciting options.

I think most of the issues I had before was I screwed up some of the desciriptions and what not. It may also need some css help in places.

Just to update,

I have found and fixed a bug that prevented the links from being able to be clicked on.

I am getting some pressure to use the non-forked version so I may end up having to switch to that. Looking at their git hub repos neither seem to have a stellar mainence record. The non forked version has 5 commits but has been updated in the past month. The forked version hasn't been updated in a year but recieved a lot more commits.

I will post a new patch later on when I can get something that has a little more approval in my office.

Hello

I have tested the patch #13 within a context.

Some options (like collapsed/expanded mode) are not saved when i save the context configuration page.

Result the original menu his hidden but i don't see any link to toggle the mplm menu.

Any help ?

Hi @jbfelix

At the bottom of the configuration there should be a field set where you can set what the toggle will be.

I am hoping to be able to put out a new patch in the next week or so with a series of bug fixes.

Thanks for your interest in this.

One thing I have discovered is this menu really requires a custom theme to work well. So far whenever I open the menu and it pushes everything right it starts a horizontal scroll bar instead of resizing content area.

@geekygnr
Thanks, good to know. A fluid-width (%, not px) design should eliminate this issue right?

@drastik

I am not sure if that would solve the problem. I am a bit out of my element here but there seems to be something weird with how the javascript pushes the elements. It is adding and removing margins and using the bartik theme on my monitor there should be more then enough white space to fit everything but it doesn't.

Even more interesting is when I set the menu to start open and then collapse the reverse happens and the page gets cut off by a margin.

All of the demos on the website use small content blocks with absolute positions so I am not sure how this menu is supposed to fit with a full sized page.

If anyone has a chance to take a look at this particular problem it would be much appreciated.

I found a hack that fixes the weird scroll bar thing. It is not pretty but might give insight to someone smarter than I.

I added the following to the javascript within $(this).multilevelpushmenu({

onExpandMenuEnd: function () {
  $item = arguments[0];
  $item.containersToPush.forEach(function(entry) {
    entry.css('margin-right', 0);
  });
},
  onCollapseMenuEnd: function () {
    $item = arguments[0];
    $item.containersToPush.forEach(function(entry) {
      entry.css('margin-right', 0);
    });
},

This at least removes the brokeness and works when the menu is opening left to right. I suspect the left margin will have to be reset for menus opening right to left.

Ok so I took a look at the multi-level-push-menu javascript and the problem is in there and the best way to fix it is to change the library.

So I have gotten rid of the entry in the libraries hook and had the library live in the module (with the modifications).

I haven't had a chance to test this on a drupal theme so I hope it works as cleanly as it does on my projects custom theme.

I still have more work to do on this for my project so I might put up some new stuff but this is pretty decent as is.

Just leaving a note here:

Noticed font-awesome library being included.
We may want a setting or something in case a user is including it elsewhere (some other method) on their site.

I added a setting for the font awesome and the google fonts css that are added in so they can be disabled if needed.

I also added some new options to the form that are centered around the menu's decoration (icons classes etc).

Hey guys,

Not sure if anyone has been able to take a look at this but the menu as my #24 patch defines has my co-workers happy so I have had to move on to other things.

This menu may have to be an option reserved for those who are interested in using this menu with a custom theme but I still think this would be a solid addition to the module.

I am always keeping an eye on my e-mail notifications from Drupal so if you have questions I am around.

@geekygnr

First off, love it. Fantastic work.

I want to get your feedback on some little tweaks that I'm thinking of making after committing your work:

• Defaulting "Full collapse" to yes.
• Default to have the "toggle control" on.
  • I know this is hard because we need "Menu toggle control container" to work nicely, but using body works well enough for starters I think.
• Change "CSS selector to move menu to" default to body
  • Again, this is for the sake of those who aren't using a theme with #page. Just to have a quicker "plug & play" experience so they get the feeling that "this is working, I just need to tweak some things". I had to play with it a bit before I started seeing anything (even though I swapped things to #selectors for my theme.
• Contexual links breaks it! MeanMenu had the same issue. If your menu is in a block, and contextual links is turned on, that will be the first <ul> it finds. I will look into this.

@drastik

If you think the change in defaults make for a better plug and play experience I don't see any reason why not to do it. To be honest it has been so long since I looked at this module outside of our own project with our own theme the defaults probably don't make any sense.

I found a bug when deploying. An error shows up when javascript aggregation is enabled on the cache.

It has to do with including //oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js

Here is a patch that adds the file to the repository instead of trying to trick drupal into downloading it.

If anyone is in need of implementing this menu on their Drupal 7 site, I wrote a nice tutorial here on how to do it without a module. Example in tutorial

https://www.drupal.org/node/2839395