Drupal Mobile Sliding Menu

The Mobile Sliding Menu module for Drupal works well, but attention to installation and configuration is important.

Required modules:

Required libraries:

Installation:

  • Install the Mobile Sliding Menu, jQuery Update, and Libraries modules in your sites/all/modules folder
  • Unzip the MMenu Libraries file and put it into your sites/all/libraries folder
  • Enable the module and run cron your Drupal site.  You should see the following information:

Configuration:

To access the configuration settings…/admin/config/mmenu/mmenu_left

This YouTube video has detailed information about installation and configuration.

I am using this module on sacredvoice.com.  Here are my configuration settings for using the RIGHT MENU with THREE BLOCKS:

  • BLOCK:
    Select a block: System – Main Menu
    Menu Parameters: default
    Title: ☰ Menu
    Collapsed: No
    Wrap: No
  • BLOCK:
    Select a block: Mmenu – Search
    Menu Parameters: default
    Title: Search sacredvoice.com
    Collapsed: No
    Wrap: No
  • BLOCK:
    Select a block: Block – Footer
    Menu Parameters: default
    Title: blank
    Collapsed: No
    Wrap: Yes
  • MMENU OPTIONS:
    Theme: mm-basic
    Effects: none selected
    Sliding Submenus: No
    Clickopen (Add-on):
    Open: Yes
    Selector: #open

    this is inserted into a block in the header with this code:<a href=”#” id=”open”>&#9776; Menu</a>the block css is float:right; margin-top: -45px;the block css is modified with media queries to adjust position on smaller screens

    Counters (Add-on):
    Add: No
    Update: No
    Dragopen (Add-on):
    Open: Yes
    pageNode: body
    Threshold: 100
    MaxStartPos: 50
    Footer (Add-on):
    Add: No
    Header (Add-on):
    Add: No
    Labels (Add-on):
    Collapse: No
    OffCanvas (Add-on):
    Flag: Yes
    Modal: No
    MoveBackground: Yes
    Position: right
    Zposition: next
    Searchfield (Add-on):
    Add: No

  • MMENU CONFIGURATIONS:
    I made only 1 modification to the default settings.
    OFFCANVAS (ADD-ON):
    PageSelector: #mm-pageIn the page.tpl.php file, I wrapped everything with:
    <div id=”mm-page”></div>

The results of my configuration is a menu that slides in from the right and pushes the main content over with it when either clicking on the Menu link or sliding across the right side of the page.

Note: the mmenu libraries that are included in the zip file are NOT the most recent releases.  Use the versions included and the you will have expected results.