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

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

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

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

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

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

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

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

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

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

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

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

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

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