WP Menufication

Resize your browser window to see how WordPress Menufication automatically generates a responsive fly-out menu.

cropped-menufication-header.jpg

Menufication Extra Content – Check what’s its like when you resize your window. You get another off-canvas area where you can add any content you like – images, shortcodes, text!

WordPress Menufication

Menufication v1.0

Table of contents

Features

  • Generates a responsive fly-out menu (similar to Facebook mobile applications).
  • Swipe the screen to open/close the menu (iOS only in v1.0).
  • Option to only generate the menu on predefined browser sizes.
  • Option to only generate the menu on mobile devices.
  • Several options to customize the behaviour of the menu.
  • Utilizes CSS-tranforms for optimal performance. Falls back to jQuery animations when CSS-transforms are not supported.
  • Uses WordPress 3 Menus , WordPress Page Menus or a custom DOM-element to generate the menu.
  • Only dependency is jQuery.

Setup

Installation

  • Unzip the .zip-folder.
  • Upload the unzipped folder to your plugin folder in wp-content.
  • Activate the plugin on the plugins page in WordPress Admin.

You can read more about manual installation of pugins here.

Customize settings

  • To access the settings for WordPress Menufication, click ‘Settings’ => ‘menufication’ in the admin-panel.
Choose Menu

There is three ways to define what menu the plugin should use when generating the responsive fly-out menu.

  1. Choose a menu from the select-field under the ‘Menu’ section on the settings-page for the plugin.
  2. Advanced – Define a custom element (e.g #my-custom-menu) under the Advanced Settings.
  3. Advanced – Checking the ‘Add fallback-support for default wp_page_menu?’ under the Advanced Settings will tell the plugin to generate the menu from the default wp_page_menu. This only works if WordPress is actually using the wp_page_menu to generate the navigation and none of the above is used.
Other Settings

All other settings are explained on the settings-page for the plugin.

Important notes

Below are some important notes about this plugin.

You should only have to worry about this section if you are an advanced user wanting to understand and change the behavior of the plugin.

Structure of the menu

WordPress Menufication presumes that the menu is generated using UL/LI-structure like the default WordPress behavior. Though very forgiving about the structure of the HTML, it should should look something like the following (additional divs etc will in most cases be tolerated). As stated above, this is the default structure of WordPress menus. Unless you are using a custom theme or have modified the menus in some way, this should all work out of the box:

<div id="my-menu">
    <ul>
        <li>
            <a href="#">Page1</a>
        </li>

        <li>
            <a href="#">Page2</a>
            <ul class="sub-menu">
                <li><a href="">SubPage1</a></li>
            </ul>
        </li>

        <li>
            <a href="#">Page3</a>
        </li>
    </ul>
</div>
Allowed tags

WordPress Menufication only allows certain tags within the menu by default. If tags that are not allowed are found, they and all of their children will automatically be removed. You can extend the list of allowed tags under the Advanced Settings. By default, the following tags are allowed DIV, NAV, UL, OL, LI, A, P, H1, H2, H3, H4, SPAN.

CSS-selectors for active items

WordPress Menufication looks for the default WordPress active menu classes current-menu-item, current-page-item and active when generating the fly-out menu. If you have used a custom walker or added custom classes for active classes, please specify them under the Advanced Settings.

CSS-selectors active menus

WordPress Menufication looks for the default WordPress child menu classes sub-menu and children when generating the fly-out menu with hierarchical support. If you have used a custom walker or added custom classes for child menus, please specify them under the Advanced Settings.

Custom CSS

You can easily add custom CSS under the Advanced Settings if there are changes you want to make.

Content-wrapping

WordPress Menufication wraps your entire page in one outer and one inner wrappers. You might encounter problems if your html, body or main container element is positioned absolute or fixed.

Custom jQuery events

WordPress Menufication emits custom jQuery events when the menu has been initialized, reset or reapplied. No additional params are provided.

Listen to these events like so:

$(document).bind('menufication-done, function(e) {
    console.log('Menufication has been initialized!')
})

$(document).bind('menufication-reset, function(e) {
    console.log('Menufication has been reset!')
})

$(document).bind('menufication-reapply, function(e) {
    console.log('Menufication has been reapplied from reset state!')
})

Browser Support

The following browsers are officially supported and tested (Browser > Version):

Desktop

  • Chrome >= 20
  • Mozilla Firefox >= 15
  • Safari >= 5
  • Opera >= 12
  • Internet Explorer >= 9

Mobile

  • Chrome for Android / iOS
  • Firefox for Android
  • AndroidBrowser for Android
  • Safari Mobile for iOS

WordPress Menufication does not currently support Internet Explorer Mobile or Blackberry. Support will be added in upcoming versions.

** Nothing will break on unsupported browsers – the menu will just simply not appear. **

Dependencies

  • jQuery >= 1.7.0

![get menufication][12]

[]: http://codecanyon.net/item/wordpress-menufication/4738650?sso?WT.ac=category_item&WT.seg_1=category_item&WT.z_author=iveo