jQuery Menufication

Menufication v1.0

Thank you for purchasing our jQuery plugin - Menufication. If you have any questions that are beyond the scope of this readme file, please feel free to email us via our user page contact form here. Thanks so much!

Table of contents

Features

Files Included

CSS-files

There is one CSS-file included. If you wish to make some changes to the styling of the plugin this should not be done in the menufication.min.css, but instead in a separate stylesheet of your chosing.

JavaScript-files

There is one JavaScript-file included in this plugin. The work is done by jquery.menufication.min.js, which exposes the jQuery-plugin Menufication which can be used by calling $('#my-menu').menufication().

Note: In order to make this plugin load faster in the browser it requires no images whatsoever. It is purely based on CSS/JavaScript.

Usage

Requirements

This plugin has jQuery v1.7 or later as it's only dependency. Please include it before loading the plugin, for example by using the following snippet to load it from Googles servers.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.min.js"></script>

After that is done you also need to include the jquery.menufication.min.js and menufication.min.css files.

    <link href="path/to/menufication/menufication.min.css" type="text/CSS" rel="stylesheet" />
    <script src="path/to/menufication/jquery.menufication.min.js" type="text/javascript"></script>

Initialization

You initialize the plugin on a given element with the following code (it is important to only run this when the orignal menu has actually loaded):

(function($) {
    $(document).ready(function() {
        $('#my-menu').menufication(options);
    })
})(jQuery);

You can also programmatically call the following functions after the plugin has been initialized:

$('#my-menu').menufication('openMenu');
$('#my-menu').menufication('closeMenu');
$('#my-menu').menufication('toggleMenu');

All of the available options are described in more detail below.

Options

You can pass in additional options to the plugin on initialization. This is done in the following way:

$('#my-menu').menufication({
    hideDefaultMenu: true,
    triggerWidth: 450,
    onlyMobile: true
})

The following options are available:

childMenuSupport(boolean)

Defines if the plugin should support hierarcichal menus.

Defaults: true

childMenuSelector(string)

Comma-separated list of child menu classes. Given a structure like the following, your childMenuSelector is 'sub-menu' (without the selector . or #). If you are using child-menus, it is important to specify their class-name here.

<div id="my-menu">
    <ul>
        <li>
            <a href="#"">Top-level</a>
            <ul class="sub-menu">
                <li><a href="">Sub-level</a></li>
            </ul>
        </li>
    </ul>
</div>

Defaults: 'sub-menu, child-menu, children'

toggleElement(string)

String containing an element which should be used to toggle the menu, e.g '#my-custom-toggle-button' (including the selector . or #).

Defaults: null

enableSwipe(boolean)

Defines if the plugin should enable swipe gestures for mobile devices (only iOS this far).

Defaults: true

hideDefaultMenu(boolean)

Defines if the plugin should hide the original menu on initialization.

Defaults: true

showHeader(boolean)

Defines if the plugin should create the default header on initialization.

Defaults: true

menuText(string)

Text to place next to the toggle button if using the default header.

Defaults: empty string

triggerWidth(number)

Set a browser width at which the plugin should initialize/reset. 770 equals 770 pixels.

Defaults: 770

addHomeLink(boolean)

Defines if the plugin should create a link to the startpage of the website at the top of the menu.

Defaults: true

addHomeText(string)

Text for the link to the startpage if the above option is set to true.

Defaults: 'Home'

activeClassSelector(string)

Comma-separated list of active menu-item classes. Given a structure like the following, your childMenuSelector is 'currently-open-page' (without the selector . or #).

<div id="my-menu">
    <ul>
        <li class="currently-open-page">
            <a href="#"">Top-level</a>
            <ul class="sub-menu">
                <li><a href="">Sub-level</a></li>
            </ul>
        </li>
    </ul>
</div>

Defaults: 'active-class, active'

supportAndroidAbove(number/float)

Disables CSS-transforms for Android devices with version numbers below this number (if something is buggy).

Defaults: 3.5

onlyMobile(boolean)

Only generate the menu for mobile devices

Defaults: false

allowedTags(string)

Allowed tags within the menu. This is to prevent large images etc from messing with the structure of the menu.

Defaults: 'DIV, NAV, UL, LI, A, P, H1, H2, H3, H4, SPAN'

wrapTagsInList(string)

Wrap the following tags in li-tags (advanced)

Defaults: ''

customFixedHeader(string)

Defines if the plugin should use a custom header-element. If specified, the element will be cloned and moved in the DOM to enabe position:fixed (this is necessary due to a webkit bug ).

Defaults: null

multipleContentElement(string)

Sets an element as the extra content which will slide in from the opposite side of the menu. Example '#myMultipleElement'.

Defaults: ''

multipleToggleElement(string)

Sets an element as the toggle for the content which will slide in from the opposite side of the menu. Example '#myMultipleToggleElement'. Needed for the multiple content to work.

Defaults: ''



Important notes

Below are some important notes about this plugin.

Structure of the menu

Menufication presumes that the menu is generated using UL/LI-structure. 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).

<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>
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

Mobile

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