MMenu Module Per Page Configuration

Question

Ok drupalers,

A good one. I am using the MMenu module to implement right hand side overlay panels. The site that I am building has two different types of users "Group A" and "Group B". They each need to see different content displayed inside of the right hand overlay created by the MMenu module.

Problem: MMenu module displays the same content on ALL the pages for "Group A" and "Group B".

The site is a demo site for anonymous users to review, so there are no user login url's to distinguish a user in Group A from a user Group B.

basically, I need a way to dynamically change the content block based on what page loads.

Anybody got any good ideas?

Answer 1

Ok for a non-programmer (my last course was literally 2 decades ago) I feel pretty good at about this one, but invite folks to provide better solutions. :-)

To solve the problem described above, I utilized a little jquery javascript via js injector (into the head section) and added the following:

!function( $ ){
$(function () { 


$("div#page_key_features").appendTo("div#right_panel_overlay_content");

});
}( window.jQuery ) 

From there, within the block that I will add to the Mobile Menu right overlay panel, I added the following HTML:

<div id="right_panel_overlay_content">
<p style="margin-bottom: 0px;">&nbsp;</p>
</div>

Then via CKEditor (source) within the body of the page I added the following HTML:

<!--outter div for invisibility--><div style="display:none;">
<!-- holds the content to be displayed in the right overlay panel     --><div id="page_key_features"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/200px-FullMoon2010.jpg" /><br />
This content is invisible in the body content of the page, but becomes   visible within the mobile menu block called "right_overlay_panel_content". This means I can edit content using ckeditor, then add the "display:none" style to the outter div to hide in the body of the page, but display it when the user triggers the right overlay panel.  I can change the content on every page if I choose.</p>
</div>
</div>

NOTE: I had to use nested divs. This allows me to hide the content of the right overlay panel within the body of the page, then display it when the user clicks the trigger showing the panel.

Now I can add custom, per page content to the Mobile Menu right overlay panel.

Here's the JS Fiddle for anyone who wants to use/tweak my little solution.