Skip to content
Menu Object. A mobile-first, progressibly enhanced menu system.
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
img
js
sass
.gitignore
Gruntfile.js
README.md
index.html
notes.txt
package.json

README.md

Menu Object (mo.js)

A mobile-first, progressively enhanced, standards based, responsive navigation menu system. Need any more buzzwords?

mo.js is made up of two primary parts.

  1. Javascript that implements many of the mo.js features such as touch-enabled drop down menus and keyboard navigation.
  2. Sass mixins that you can use to quickly style your menu in a variety of ways.

Here's how it works:

  • By default, menu items are displayed as a typical drop down menu via :hover.
  • If viewed on a touch device, the :hover functionality is replaced with arrow icons for expanding/contracting submenus via click instead of hover.
  • If viewed on a mobile device (or a small screen), the menu is hidden and a toggle button is created.
  • All menu levels should be available regardless of the device.
  • Should handle multiple menus without issue.

HTML structure will follow the default WordPress menu output. CSS/Javascript will take inspiration from sources such as the Superfish menu and responsive-nav.com.

How to use mo.js in your project

  1. First of all, you'll need the mo.js file, which is located in the js folder.

  2. In the js folder, you'll also see the demo.js file, which you need to apply the mo.js file script to your menu. You can do that either by loading the demo.js file and modifying it, or by adding that code to the mo.js file, or by placing it in another javascript file, or even in the header or footer of the theme.

  3. After that, you'll need to load the CSS file (which is located at css directory) or add the CSS file in your stylesheet.

The goal is for it to work like this:

  1. mo.js adds and removes classes from the menu depending on the circumstance (Example: Does this menu item contain a submenu?)
  2. The CSS file uses those classes to show/hide/manipulate the menu.
You can’t perform that action at this time.