Moby.js Examples

Examples that showcase some of Moby's options

Download 2.0.7

Using the Preset Animations

Moby.js comes packaged with 7 different transitions. All of these are editable throught the moby.less or moby.css files. Click each button below to view the different transitions.

"left-side" "right-side" "top-full" "bottom-full" "grow-out" "shrink-in" "fade"

To change the animation, specify one of the presets above for the menuClass property, OR assign your own class and style it with less / css.

// The default value for menuClass is "right-side"
var mobyMenu = new Moby({
	menuClass    :  'left-side' // This is the class that is added to Moby (Mobile menu)

Customizing the Moby Template

When you create a new Moby menu, you have the option to customize what markup is generated inside of Moby. You can include as little or as much markup as you wish, as long as you have at least the .moby-menu class included. This class is where the cloned menu will be placed

Take a look

To change the template, add the markup you wish to the template property. There are 2 reserved classes: .moby-close and .moby-menu

var template  = '<div class="moby-inner">';
    template +=     '<div class="moby-close"><span class="moby-close-icon"></span></div>'; // Reserved class for closing moby
    template +=     '<div class="moby-wrap">';
    template +=         '<div>';
    template +=             '<img src="images/moby-logo-white.svg">';
    template +=             '<div class="moby-menu"></div>'; // Must be included in template
    template +=         '</div>';
    template +=     '</div>';
    template +=     '<p>If you see a better mobile menu, let minnow</p>';
    template += '</div>';

var demo = new Moby({
    template : template,

Customizing the drop down icons

When there are nested <ul> elements, Moby.js will allow hide them, and allow the user to expand them. Both the "open" and "close" icons are cutomizable. (I recommend using Google's Material icons).

Try it out

To change the contents of the close and open icons, add the markup you wish to the subMenuOpenIcon and subMenuCloseIcon properties.

// The defualt value for subMenuOpenIcon is "▼"
// The defualt value for subMenuCloseIcon is "▲"
var mobyMenu = new Moby({
	subMenuOpenIcon: '<i class="material-icons">keyboard_arrow_down</i>', // icon that shows when the submenu is hidden
    subMenuCloseIcon: '<i class="material-icons">keyboard_arrow_up</i>', // icon that shows when the submenu is showing