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.

License

colinrei/menuspy

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages