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. Timeline.js

    JavaScript

    スライド式のタイムラインを実装できるjQueryプラグイン「Timeline.js」

    Timeline.jsは、スライド式によるタイムラインを実装することが…

  2. Timeliny

    JavaScript

    レスポンシブ対応の年ベースによるjQueryタイムライン「Timeliny」

    Timelinyはレスポンシブに対応した年ベースによるタイムラインを実…

  3. LC Micro Slider
  4. Audero Smoke Effect

    JavaScript

    スモーク(煙)のエフェクトを実装できるjQueryプラグイン「Audero Smoke Effect…

    スモーク(煙)のエフェクトを実装することができるjQueryプラグイン…

  5. Combodate

    JavaScript

    日付や時間をドロップダウン式にしてくれる「Combodate」

    Combodateは日付や時間の入力をドロップダウン式に置き換えてくれ…

  6. Background Blur

    JavaScript

    画像をボカしてくれるクロスブラウザ対応の「Background Blur」

    Background Blurは画像をカッコよくボカしてくれるクロスブ…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP