WP MMenu Lite

Easily create and customize a gorgeous app-like mobile menu based on Fred Heusschen’s mmenu.js!

What is it?

WP MMenu Lite is based off of Fred Heusschen‘s incredibly powerful and beautiful mmenu.js jQuery plugin. WP MMenu Lite combines the simplicity of WordPress with the powerful features of mmenu.js to create a Mobile Menu Plugin. It’s easy to setup and use but also gorgeous right out of the box. WP MMenu Lite uses WordPress’s default menus/locations to keep things familiar for anyone who’s ever built a menu within WordPress.

How to use it

After you have installed the plugin…

• Create a Menu

• Set the location for that menu to Mobile Menu

• Use the [mmenu][/mmenu] shortcodes to create a link that will open the mmenu

Using the Shortcode

Here are two examples of how you can use the shortcode:

[mmenu]example[/mmenu]

(within your page content)

OR

example

These do the exact same thing, so if you want to incorporate this plugin into a theme you can do the latter in any template file and it should work.

Installation

1. Upload wp-mmenu-lite.zip to the /wp-content/plugins/ directory

2. Activate the plugin through the ‘Plugins’ menu in WordPress

3. Use the shortcode [mmenu]example[/mmenu] in the page content or use <a href="#mmenu">example</a> outside of the page content

Creating Menus

WP MMenu Lite uses default menus (see Appearances -> Menus within your dashboard). After you’ve created a new menu and added all your pages and hit the Create Menu button you’ll then need to assign the menu to the Mobile Menu location. If you’re lost and don’t know how to create menus, see the WordPress Menu User Guide

Using the Shortcode

Here are two examples of how you can use the shortcode:

[mmenu]example[/mmenu]

(within your page content)

OR

<a href="#mmenu">example</a>

These do the exact same thing, so if you want to incorporate this plugin into a theme you can do the latter in any template file and it should work.

How can I create an element that’s fixed, so that it moves when the menu opens?

You can add the css class mm-fixed-top or mm-fixed-bottom to any element and it should make it fixed. Find out more here…

1. 

   General Settings

2. 

   Themes / Position

3. 

   Front End Example (Default theme)

4. 

   Front End Example - Sliding Submenu (Default theme)

5. 

   Position Top Example (mm-light theme)