MenuSpy

A JavaScript library to make navigation menus highlight the item based on currently in view section.

• No dependencies
• Easy to use
• Lightweight and fast

Usage

Include MenuSpy

<script src="menuspy.js"></script>

MenuSpy will be available in the global scope.

You can also use NPM / Yarn to install it and then require it as a module.

NPM

npm install menuspy

Yarn

yarn add menuspy

Require the module:

var MenuSpy = require('menuspy');

---

Example of menu element:

<header id="main-header">
  <nav>
    <ul>
      <li><a href="#features">Features</a></li>
      <li><a href="#usage">Usage</a></li>
      <li><a href="#options">Options</a></li>
      <li><a href="#examples">Examples</a></li>
    </ul>
  </nav>
</header>

You can also use data-target on the anchor element with a selector. Example:

<a href="#anything" data-target="selector">Anything</a>

Initialize the plugin on your menu element.

var elm = document.querySelector('#main-header');
var ms = new MenuSpy(elm);

The MenuSpy() constructor accepts two arguments: the container element and an options object.

Options

| Option | Type | Default | Description | | ---------------------| -------- | -------------------------- | ----------------------------------------------------------------------- | | menuItemSelector | String | a[href^="#"] | Menu items selector. | | activeClass | String | active | Class applied on menu item relative to the currently visible section. | | threshold | Integer | 15 | Amount of space between your menu and the next section to be activated. | | enableLocationHash | Boolean | true | Enable or disable browser's hash location change. | | hashTimeout | Integer | 600 | Timeout to apply browser's hash location. | | callback | Function | function(currentItem) {} | A function to be called every time a new menu item activates. |