MenuSpy

JavaScript

セクションビュー対応のナビゲーションメニュー実装「MenuSpy」

MenuSpyは、ナビゲーションメニューを作成するためのjsライブラリです。MenuSpyには大きな特徴があり、ページ内で滞在しているセクションビューに対応してメニューが強調されながら自動で推移していきます。通常は、メニューを選択して該当するエリア(アンカーなど)を表示させますが、ユーザーのスクロールによってメニューが自動で強調されます。シングルページに使用するには最適なナビゲーションメニューの仕様です。それでは、MenuSpyについて詳しく見ていきましょう。

MenuSpy

デモ

MenuSpyには、3つのポイントがあります。

依存関係がない

ES6を使用していますので、外部のライブラリやフレームワークを設置することなく動作します。

使いやすい

ダウンロードしたjsファイルを読み込むだけですので、非常に使いやすいライブラリです。

軽量で高速

使用するファイル「menuspy.js」はわずか5KBと軽量ですので、動作も高スピードが期待できます。

MenuSpyは様々なナビゲーションを実装することに適しています。

デモサイトでは、[固定フッター][サイドメニュー][Lavalampメニュー]の3つが紹介されていました。冒頭で、シングルページに最適だと言いましたが、その際は[サイドメニュー]を使用すると1ページで完結するサイトであることが、ユーザーにも伝わりやすいかと思います。自動でメニューが動くとなんとなく下へスクロールしてみたい衝動にかられませんか?

あまり聞きなれない[Lavalampメニュー]ですが、これは[固定フッター]をより動的にしたものと思ってください。スクロールなどによりサイト内の滞在エリアが変わるとともに、該当するメニューの背景もスライドしたように変わる挙動です。

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

メニューは[nav]要素で囲い、[ul・li]でリスト化してあげてください。オプションについても配布サイトで紹介されていますので、ご参考にどうぞ。

MenuSpy

関連記事

  1. Tabslet

    JavaScript

    jQueryプラグインでタブ機能が実装できる「Tabslet」

    TabsletというjQueryプラグインを使えばWebサイトにタブ機…

  2. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

  3. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

  4. JavaScript

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイ…

  5. no-image

    JavaScript

    シンプルでスタイリッシュなjQueryスライダー「Simple slider」

    Simple sliderはシンプルでスタイリッシュなスライダー(カル…

  6. jquery.stepper.js

    JavaScript

    マウス操作で値の増減ができるjQueryプラグイン「jquery.stepper.js」

    jquery.stepper.jsは、マウス操作から手軽に値の増減を行…

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP