Description

Moby.js easily converts a desktop <nav> into a mobile friendly version. When the mobile button is clicked, the mobile nav will animate in using one of the 7 preset animations. If these animations don't suit your fancy, you can simply add your own class to Moby's menu, and style it as you see fit. Nested <ul> elements (Drop down items) are hidden and can be expanded by the user, while still having the ability to click on the actual link. No more fake top level navigation links required!

Available Options with defaults

Below are the current options available with their defaults. Each options is explained further down the page.


var mobyMenu = new Moby({
	breakpoint		 : 1024,
	enableEscape	 : true,
    menu             : $('#main-nav'),
	menuClass		 : 'right-side',
	mobyTrigger		 : $("#moby-button"),
    onClose          : false,
    onOpen           : false,
	overlay			 : true,
	overlayClass 	 : 'dark',
    subMenuOpenIcon  : '<span>&#x25BC;</span>',
	subMenuCloseIcon : '<span>&#x25B2;</span>',
    template         : '<div class="moby-wrap"><div class="moby-close"><span class="moby-close-icon"></span> Close Menu</div><div class="moby-menu"></div></div>'
});

The Options

breakpoint

(integer | boolean) The number that is entered should match the breakpoint of when the targeted menu switches to mobile. If Moby is open when the screen resizes above the set breakpoint, Moby will close. Set to false if no breakpoint is desired.

Default: 1024

enableEscape

(boolean) Enable or disable closing Moby with the escape key. Set to true to enable, false to disable.

Default: true

menuClass

(string) This is the class that will be added to Moby. There are preset animation you can use, or create your own with css.

Default: 'right-side'

mobyTrigger

(element) The element that will trigger Moby to open. It is recommended to NOT use an <a> tag for the trigger, but instead use a  tag. If not set, #moby-button will be set to the default trigger.

Default: $("#moby-button")

onClose

(function | boolean) Callback function that is ran when Moby is closed. By default the callback function is disabled.

Default: false

onOpen

(function | boolean) Callback function that is ran when Moby is opened. By default the callback function is disabled.

Default: false

overlay

(boolean) Show or hide an overlay that will appear below Moby, but above the content. Set to true to show, false to hide.

Default: true

overlayClass

(string) You can add a class to the overlay as well. Target .moby-overlay in your CSS to add your own style, or you can use one of the available options.

Available options: 'dark' | 'light' | 'your-own-class'

Default: 'dark'

subMenuOpenIcon

(string) The icon displaying when sub menus are hidden (to prompt the user to expand it) can be replaced with text, markup, material-icons, etc.

Default: '▼'

subMenuCloseIcon

(string) The icon displaying when the sub menus are showing (to prompt the user to collapse it) can be replaced with text, markup, material-icons, etc.

Default: '▲'

template

(string) The desired template of Moby. You can create what ever mark up you wish, the only requirement is you MUST have a .moby-menu class in your template, otherwise an error will be thrown. .moby-menu is where the cloned menu will be placed.

Default:


<div class="moby-wrap">
    <div class="moby-close"> <!-- Reserved class for closing Moby -->
        <span class="moby-close-icon"></span> Close Menu
    </div>
    <div class="moby-menu"></div> <!-- Must be included -->
</div>

The Methods

These methods are only to be used after you have already instantiated Moby.

.closeMoby()

Using closeMoby() will manually close the Moby menu. Simply target the same menu as you did when you instantiated Moby.


// Manually closes Moby
mobyMenu.closeMoby();

.openMoby()

Using openMoby() will manually open the Moby menu. Simply target the same menu as you did when you instantiated Moby.


// Manually opens Moby
mobyMenu.openMoby();

Moby.js Documentation