How to use mmenu without breaking core Overlay How can I use mmenu jquery library without breaking core Overlay. Overlay works, but when I do a page refresh (F5) the overlay is blank. When I prevent the mmenu library from loading it works again.

I load the library in hook_preprocess_html in my custom zen theme:

drupal_add_css(drupal_get_path('theme', 'zen_sub') . '/css/mmenu/jquery.mmenu.all.css');
drupal_add_js(drupal_get_path('theme', 'zen_sub') . '/js/mmenu/jquery.mmenu.min.all.js', 'file');
drupal_add_js(drupal_get_path('theme', 'zen_sub') . '/js/zensub.js', 'file');


I then add the menu to the zen theme in hook_preprocess_page through a preprocess variable:

$menu_left = menu_tree_all_data('main-menu');
$menu_left = menu_tree_output($menu_left);
$menu_left = drupal_render($menu_left);
$vars['mmenu_markup'] = array(
      '#markup' =&gt;
        '&lt;div id="menu-left"&gt;' . $menu_left . '&lt;/div&gt;',
);


And finally I include placeholders for the menu, as well as the preprocess variable in my page.tpl.php

&lt;div id="header-nav"&gt;
 &lt;a href="#menu-left" class="menu-left"&gt;&lt;/a&gt;
 &lt;?php print variable_get('site_name', "ZenSub");?&gt;
 &lt;a href="#menu-right" class="menu-right"&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;?php print render($mmenu_markup); ?&gt;


And Finally this is my js file (zensub.js) to set it all in motion:

(function ($, Drupal, window, document, undefined) {
    Drupal.behaviors.zensub = {
        attach: function(context, settings) {
            $('div#menu-left').once().mmenu({
               offCanvas: {
                   position: "left",
                   zposition: "front"
               },
               header   : true
            }, {
                // configuration object
               classNames: {selected: "active"}
            });

        }
    };

})(jQuery, Drupal, this, this.document);
You should consider using Mobile Sliding Menu. It could save you a lot time and pain.


  The mobile sliding menu module integrates the mmenu jQuery plugin for
  creating slick, app look-alike sliding menus for your mobile website.