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.
- 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.
How to use mo.js in your project
First of all, you'll need the mo.js file, which is located in the js folder.
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:
- mo.js adds and removes classes from the menu depending on the circumstance (Example: Does this menu item contain a submenu?)
- The CSS file uses those classes to show/hide/manipulate the menu.