Hysteresis nav

Cursor-predicting hover menu

Example

https://mjbp.github.io/storm-hysteresis-nav

Usage

JS

npm i -S storm-hysteresis-nav

either using es6 import

import HysteresisMenu from 'storm-hysteresis-nav';

HysteresisMenu.init('.js-nav');

aynchronous browser loading (use the .standalone version in the /dist folder)

import Load from 'storm-load';

Load('/content/js/async/storm-hysteresis-nav.standalone.js')
    .then(() => {
        StormHysteresisMenu.init('.js-nav');
    });

Options

    {
        delay: 400,
        animationDelay: 160,
        itemSelector: '.js-hysteresis-nav-item',
        animatingClassName: 'is--animating',
        activeClassName: 'is--active',
        hoverClass: '',
        tolerance: 75,
        callback: null
    }

Tests

npm run test

Browser support

This is module has both es6 and es5 distributions. The es6 version should be used in a workflow that transpiles.

This module depends upon Object.assign, element.classList, and Promises, available in all evergreen browsers. ie9+ is supported with polyfills, ie8+ will work with even more polyfills for Array functions and eventListeners.

Dependencies

None

License

MIT

Credit

Inspired by http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown