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

mgGlitchグリッチ効果を付けれるjQueryプラグイン「mgGlitch」前のページ

Excelと互換性のあるスプレッドシートを埋め込めるjQueryプラグイン「jExcel」次のページjExcel

関連記事

  1. Folder Preview Ideas

    JavaScript

    フォルダに楽しいホバーアニメーションをつける「Folder Preview Ideas」

    Folder Preview Ideasは、フォルダにさまざまな楽しい…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーションを遅らせるにはdelayを使えばいいらしい

    ちょっとしたメモです。jQueryでanimateをメソッドチェーンで…

  3. gridscrolling.js
  4. no-image
  5. topbar

    JavaScript

    画面上部に美しいプログレスバーを表示できる「topbar」

    topbarは、ページ読み込み時に画面上部に美しいプログレスバーを表示…

  6. jQuery.appear

    JavaScript

    ビューポート外のコンテンツ表示を防止できる「jQuery.appear」

    jQuery.appearは、元々は非表示となっているものや、ビューポ…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP