Read me

Installation

Installing the mmenu WordPress plugin is no different from installing any other WordPress plugin. Here's a step by step guide (assuming you've allready installed WordPress and got it up and running).

  • Go to your WordPress admin panel.
  • In the menu on the left, click on "Plugin > Add New".
  • Click on the "Upload Plugin" button next to the title.
  • Browse to the "mmenu.zip" file and upload it.
  • Make sure the following newly added files are writable. If they aren't, you'll need to chmod these files to be writable:
    • wp-content/plugins/mmenu/js/mmenu.js
    • wp-content/plugins/mmenu/css/mmenu.css
  • After the plugin is installed, click the "Activate plugin" link.
  • Click on "mmenu" in the menu on the left and follow the instructions.

Locate the menu

All menus used by your theme are automatically listed in the "selector" combobox. If the menu you're looking for isn't listed, you can either specify it manually or use the "locate on website" button.
More info on the locate combobox and button.

Locate the button

All menus buttons used by your theme are automatically listed in the "selector" combobox. If the button you're looking for isn't listed, you can either specify it manually or use the "locate on website" button.
More info on the locate combobox and button.

Locate elements

Some options require you to locate an element on your website, this can be done in three ways:

  • By typing a selector in the combobox. Click the "help"-icon next to the combobox for more information.
  • By choosing a pre-defined selector from the combobox.
  • By clicking the "Locate on website"-button.

After clicking the "Locate on website"-button, a popup with your website will open and you can visually target the element. Have a look at the image below.

  1. Choose a selector from the list on the left.
  2. Or, click on one of the blue colored elements in the website. The selected element turns green.
  3. Change the screen-size if needed for responsive websites.
  4. Click the "close"-icon to cancel and return back to the admin page.
  5. Click the "save"-button to save and use the selected element.

If the popup can't find the element you need, make sure is has either an ID or a (preferably unique) CLASS and try again.

Changing options

To use the mmenu WordPress plugin, go to your WordPress admin panel and click on "mmenu" in the menu on the left to enter the mmenu options page. Here you can change the behavior and the appearance of the mobile menu. When visiting this page for the first time, you'll be presented with a step-by-step setup to locate the button for opening the mobile menu (and possibly the original menu) on the website.

Help icon
Click on the "help"-icon next to an option (if present) to reveal additional information about the option.
Gear icon
Click on the "gear"-icon next to an option (if present) to reveal additional (sub)options.

Advanced options

At the bottom of the mmenu options page, there is a list of advanced options. Here's a short explanation for each of these options:

Add a shadow to the page.
When checked, a shadow is added to the page to emphasize it's in front of the menu. Only applies when the menu is positioned at the left or right side of the page.
Dim out the page to black.
When checked, the page will dim out to black when the menu is opened to emphasize it's in a "disabled" state.
Indent the listitem borders.
When checked, the bottom border of all listitems will be indented to be aligned with the text.
Add a counter for submenus.
When checked, a counter is added to all listitems that have a submenu. This counter shows the number of listitems in the submenu and automatically updates when the searchfield is used and listitems are hidden due to the search.
<a href="#"> opens submenu.
When checked, all listitems that link to "#", will become a full-width link that opens the submenu.