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. jQueryプラグイン

    JavaScript

    jQueryプラグイン・2014年下半期70選まとめ

    今年も残すところ後わずかとなってしまいました。というわけで、2014年…

  2. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

  3. no-image

    JavaScript

    縦スクロールによるフォトギャラリー実装「Simple Scroll Gallery」

    Simple Scroll Galleryは縦スクロールによるかっこい…

  4. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  5. LuminJS

    JavaScript

    テキストを徐々にハイライトしていく「LuminJS」

    LuminJSはWebページ上のテキストを徐々にハイライトしていくJa…

  6. jQuery Tags Input

    JavaScript

    シンプルでお洒落なタグを入力することができるjQueryプラグイン「jQuery Tags Inpu…

    とても便利で面白いjQueryプラグインがあったのでご紹介します。シン…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP