Skip to content

themefoundation/mo-js

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
img
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Menu Object. A mobile-first, progressibly enhanced menu system.

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •