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.
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
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).
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
});