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. Sticky Sidebar

    JavaScript

    スマートでハイパフォーマンスな追尾型サイドバー実装「Sticky Sidebar」

    Sticky Sidebarは、スマートでハイパフォーマンスな追尾型サ…

  2. Touch-Tabs-jQuery

    JavaScript

    イベントやカスタマイズが可能な拡張性の高いタブシステム「Touch-Tabs-jQuery」

    Touch-Tabs-jQueryは、イベント設定やカスタマイズが可能…

  3. HTML5 Sortable

    JavaScript

    リストをドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 So…

    リスト化した要素をドラッグ&ドロップで並べ替えることができるjQuer…

  4. jQuery Glow
  5. Accessible Mega Menu
  6. SpriteSpin

    JavaScript

    タッチにも対応した360度ビューを実装できるjQueryプラグイン「SpriteSpin」

    SpriteSpinはプロダクトページなどで役立つ、360度ビューを実…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP