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.
Or install via NPM/Yarn and require as a module
NPM
npm install menuspy
Yarn
yarn add menuspy
var MenuSpy = require('menuspy');
Initialize the plugin on your 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>
var elm = document.querySelector('#main-header');
var ms = new MenuSpy(elm);
The MenuSpy() constructor accepts two arguments: the container element and an options object.