Mobilio-menu

Transforms your menu to an off-canvas mobile menu with 2 lines of javascript, no dependencies or external libraries. Only 1kb JS and 3kb CSS when gzipped.

##Example:

Include scripts and styles:

<script src="path/to/mobilio-menu.js" type="text/javascript"></script>
<link href="path/to/mobilio-menu.css" rel="stylesheet" />

Create menu:

<script>
	var elem = document.querySelector('#myList');
    mobilioMenu.create(elem, { breakpoint:768 });
</script>

Look at the example index.html for and example of how to use mobilio-menu. This library expects your menu to be an UL-list.

##Options

breakpoint(Int)

At what width should we initialize/reset the mobilio menu. Null for always.

Defaults: null

direction(String)

Should the menu slide in from left or right

Defaults: 'left'

theme(String)

Light/Dark theme

Defaults: 'dark'

hideOriginal(Boolean)

Whether you should hide the original menu when initializing

Defaults: true

allowedTags(Array)

An array containing nodenames of allowed elements. If the original menu contains an element which is not allowed, it will be removed along with all of it's children. Merges the user-specified array with the defaults.

Defaults: ['DIV', 'UL', 'OL', 'LI', 'A', 'SPAN']

childMenuClass(String)

Classname of the childmenus. Needed for hierarchical menus with toggle-functionality.

Defaults: '.child-menu'

stripClasses(Boolean)

Whether you want to strip the original classes of the elements in the menu. By default all classes will be stripped so that there is no interfering css.

Defaults: true

stripIDs(Boolean)

Whether you want to strip the original attributes IDs of the elements in the menu. By default all IDs will be stripped so that there is no interfering css.

Defaults: true

##Build

Install grunt using npm then just runt 'grunt' in the project directory.

##Caveats

• Only works on browsers with support for CSS3-transforms (Chrome, Safari, Firefox, IE10+)