rammonav v1.0.3

Rammonav

The easy priority navigation plugin

Usage

Rammonav can be used in a variety of ways because you have the freedom to decide the destination of the moved items. It copies the navigation, appends it to the target and adds or removes classes depending on whether or not there's room for it in the navigtion.

At the moment only horizontal navigations are supported.

Below is an example of how Rammonav can be used. The example uses flex to position navigation and items but any case where the container can't overflow its parent and the navigation can overflow the container should work.

Markup

<nav class="rammonav">
  <ul class="nav">
    <li class="nav__item"><a href="#" class="nav__link">Donatello</a></li>
    <li class="nav__item"><a href="#" class="nav__link">Leonardo</a></li>
    <li class="nav__item"><a href="#" class="nav__link">Michelangelo</a></li>
    <li class="nav__item"><a href="#" class="nav__link">Raphael</a></li>
    <li class="nav__item"><a href="#" class="nav__link">Splinter</a></li>
    <li class="nav__item"><a href="#" class="nav__link">Shredder</a></li>
    <li class="subnav"></li> <!-- Navigation items will be move to here -->
  </ul>
</nav>

Styling

.rammonav {
  display: flex;
  width: 100%; }

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; }

.nav.rammo-clone {
  flex-direction: column; } /* Stack the items in the cloned navigation */

.rammo-hidden, .rammo-empty {
  display: none; }

Javascript

import Rammonav from 'rammonav'

const rammonav = Rammonav(
  document.querySelector('.rammonav'),
  {
    target: document.querySelector('.subnav')
  }  
)

Options

• {HTMLElement} container Check overflow on this element
• {HTMLElement} options.source Copy this to the target
• {HTMLElement} options.target Move source to here
• {Number} options.breakpoint Rammonav only takes effect on window widths higher than this value
• {String} options.itemsSelector CSS selector for items that should be added or removed
• {String} options.hiddenClass This is added to items when they should be hidden
• {String} options.cloneClass This is added to all cloned elements
• {String} options.emptyClass This is added to the target when all cloned items are hidden
• {String} options.widthAttribute This is added to all items with item.clientWidth as the value
• {String} options.indexAttribute This is added to all items and cloned items and used when hiding/showing

API

Rammonav returns an object that you can use in your application to manually remove items or see which items are removed.

• check() Checks the navigation and adds or removes items if necessary.
• movedItems Array of moved items.
• onmove Callback that is called everytime an item is moved with the Rammonav instance as its only argument.