MenuSpyは、ナビゲーションメニューを作成するためのjsライブラリです。MenuSpyには大きな特徴があり、ページ内で滞在しているセクションビューに対応してメニューが強調されながら自動で推移していきます。通常は、メニューを選択して該当するエリア（アンカーなど）を表示させますが、ユーザーのスクロールによってメニューが自動で強調されます。シングルページに使用するには最適なナビゲーションメニューの仕様です。それでは、MenuSpyについて詳しく見ていきましょう。
MenuSpy
MenuSpyの実際のデモは以下のページから確認できます。
デモ
MenuSpyには、３つのポイントがあります。
依存関係がない
ES6を使用していますので、外部のライブラリやフレームワークを設置することなく動作します。
使いやすい
ダウンロードしたjsファイルを読み込むだけですので、非常に使いやすいライブラリです。
軽量で高速
使用するファイル「menuspy.js」はわずか5KBと軽量ですので、動作も高スピードが期待できます。
MenuSpyは様々なナビゲーションを実装することに適しています。
デモサイトでは、［固定フッター］［サイドメニュー］［Lavalampメニュー］の３つが紹介されていました。冒頭で、シングルページに最適だと言いましたが、その際は［サイドメニュー］を使用すると１ページで完結するサイトであることが、ユーザーにも伝わりやすいかと思います。自動でメニューが動くとなんとなく下へスクロールしてみたい衝動にかられませんか？
あまり聞きなれない［Lavalampメニュー］ですが、これは［固定フッター］をより動的にしたものと思ってください。スクロールなどによりサイト内の滞在エリアが変わるとともに、該当するメニューの背景もスライドしたように変わる挙動です。
MenuSpyの使い方ですが、ダウンロードしたら［menuspy.js］を下記のようにサイトへ読み込みます。
<script src="menuspy.js"></script>
メニューは［nav］要素で囲い、［ul・li］でリスト化してあげてください。オプションについても配布サイトで紹介されていますので、ご参考にどうぞ。
LPサイトなどシングルページのナビゲーションメニューの実装をお考えの方は、ぜひチェックしてみてください。ダウンロードや詳しい使い方は以下からどうぞ。
