Javascript

【Javascript】ナビゲーションメニューを作成するためのJavaScriptライブラリーMenuSpy

December 28, 2016
menuspy

MenuSpyはセクションに基づいて項目をアクティブにするナビゲーションメニューを作成するためのJavaScriptライブラリー。

Usage

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

メニュー要素のプラグイン

<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>
var elm = document.querySelector('#main-header');
var ms = new MenuSpy(elm);

Options

Example

var elm = document.querySelector('#main-header');
var ms = new MenuSpy(elm, {
  activeClass: 'current-item'
});
Option Default
menuItemSelector a[href^=”#”]
activeClass active
threshold 15
hashTimeout 600
callback function(anchorElm, targetElm) {}

MIT