Moby.js

Wave goodbye to annoying Mobile Menus

Moby.js is a JS Library that assists in creating mobile menus

Download 2.0.7

How it works

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

Try it out:

Getting started

1. Adding the files to your project

You can download the files, or simply include Moby.js in your project by using Bower install.


bower install moby.js

Point to which ever style files you prefer (plain css or minified versions)


<link type="text/css" rel="stylesheet" href="./path-to-bower-components/dist/moby.js/moby.min.css"/>
OR
<link type="text/css" rel="stylesheet" href="./path-to-css/moby.min.css"/>

If you are using less, you can import Moby into your less file


@import './path-to-bower-components/moby.js/dist/moby.less';
OR
@import './path-to-css/moby.less';

PRO TIP: Google's Material Icons work as a great asset when using Moby.js. Download Google's Material Icons

Link JS file(s) at the bottom of the document, just before </body>


<!--
    Moby.js requires jQuery version 1.11.1 or higher.
    If using Bower, jQuery is a dependency and will be downloaded automatically
-->
<script src="./path-to-bower-components/jquery/dist/jquery.min.js"></script>
<script src="./path-to-bower-components/moby.js/dist/moby.min.js"></script>
OR
<script src="./path-to-js/jquery-1.11.1.min.js"></script>
<script src="./path-to-js/moby.min.js"></script>

2. Add / Verify Markup (HTML)

Make sure your document contains a <nav> (make sure it's semantic & proper), and make sure it contains a mobile menu button.


<!-- Standard sample menu -->
<nav id="main-nav">
	<ul>
		<li><a href="#">Link 1</a></li>
		<li><a href="#">Link 2</a></li>
		<li><a href="#">Link 3</a></li>
		<li><a href="#">Link 4</a></li>
	<ul>
</nav>

<!-- Do NOT use an anchor tag for the mobile menu button -->
<span id="moby-button">
	<i class="material-icons">menu</i>
</span>

3. Iniate basic Moby.js

Moby.js comes with basic styling, and defaults. For full details on customizing Moby.js, please refer to the Documentation.


var mobyMenu = new Moby({
    menu       : $('#main-nav'), // The menu that will be cloned
	mobyTrigger: $('#moby-button'), // Button that will trigger the Moby menu to open
});