[JS]コンテンツを効果的にナビゲートするjQueryのプラグインのまとめ

スマフォ・タブレットでよく見かける三本線のナビゲーションをはじめ、コンテンツをスライドしてかっこいいアニメーションで表示されるサイドバー、1ページで構成されたサイト用のナビゲーションなど、あなたの大切なコンテンツを効果的にナビゲートするjQueryのプラグインを紹介します。

デモのキャプチャ

SlickNav

リスト要素で実装するシンプルなスマフォ対応のナビゲーション。多階層対応、キーボード操作対応、アニメーション付きなどのカスタマイズも可。

デモのキャプチャ

Naver

今使用している水平型などのナビゲーションをスマフォやタブレットで表示した際に、トグル型ナビゲーションに自動で変更すます。
当サイト解説ページ

デモのキャプチャ

Clingify

ナビゲーションを配置したヘッダをスクロールしても上部にぺたっと貼りつくように表示します。スクロールのプレ行くポイントを設定し、貼りつく要素を変更することも可能。
当サイト解説ページ

デモのキャプチャ

Sidr

ナビゲーションを配置したサイドバーをコンテンツの左右をスライドして表示します。デザインもテーマがダークとライトの2種類用意されています。

デモのキャプチャ

Box Lid Menu

ナビゲーションボタンをクリックすると、コンテンツを3Dに斜めに傾けダイナミックなアニメーションで、ナビゲーションを表示します。

デモのキャプチャ

Bounce Menu

スマフォ・タブレット用のナビゲーションで、バウンドするエフェクトが気持ちいいです。

デモのキャプチャ

End Page Box

ページをスクロールし、コンテンツを読み終えたくらいやページの途中や下など指定した範囲に次のコンテンツへ誘導するパネルを表示します。
当サイト解説ページ

デモのキャプチャ

Chardin.js

ページ上に配置したさまざまな要素に、オーバーレイで説明を添えることができます。
当サイト解説ページ

デモのキャプチャ

intro.js

ユーザーのコンテンツのガイドとなるイントロダクションを表示します。

デモのキャプチャ

One Page Nav

1ページで構成されたサイト用のナビゲーション。ナビゲーションとしても機能し、現在位置の表示にも対応しています。

デモのキャプチャ

menu-aim

操作が難しいドロップダウン型メニューをユーザーが簡単に操作でき、より素早く目的のアイテムにたどり着くことができるよう設計されたナビゲーション。

デモのキャプチャ

slimMenu

多階層対応の水平タイプのナビゲーションを簡単に実装できます。デスクトップだけでなくスマフォ・タブレットにも対応。

デモのキャプチャ

rCrumbs

テキストベースで実装した長い一行のパンくずを表示幅に合わせて最適な幅に変更して表示します。

top of page

©2017 coliss