ナビゲーション

http://wheelnavjs.softwaretailoring.net/index.html

【wheelnav.js】回転する新感覚のナビゲーションを実装するjQueryプラグイン

Lisence: MITライセンス
Tag: アニメーショングラフ・表
http://wheelnavjs.softwaretailoring.net/

【wheelnav】SVGを使った回転するのナビゲーションを実装するスクリプト

Lisence: MITライセンス
Tag: アニメーション円形
Slideout.js

【slideout】コンテンツを横にスライドさせナビゲーションを表示するスクリプト

単体で動くスクリプトです。

Lisence: MITライセンス
Tag: スライドインナビゲーション
http://alexchizhov.com/pwstabs/#demos

【PWS Tabs】様々なタブを実装できるjQueryプラグイン

CSS3を使ったアニメーションでタブコンテンツを表示するjQueryプラグイン。

Lisence: MITライセンス
Tag: エフェクトタブ
http://git.blivesta.com/drawer/

【drawer】アプリなどで見かけるサイドバーが設定できるjQueryプラグイン

Lisence: MITライセンス
Tag: レイアウト位置固定
http://www.toolitup.com/minimap.html

【minimap】ページ自体のサムネイルを作ってナビゲーションにできるjQueryプラグイン

Lisence: MITライセンス
Tag: サムネイル
MenuItems

【MenuItems】レスポンシブ対応のメニューを実装するjQueryプラグイン

Lisence: MITライセンス
Tag: レスポンシブ
http://weblinc.github.io/jquery.smoothState.js/index.html

【smoothState.js】画面をスライドしながら遷移するjQueryプラグイン

Lisence: MITライセンス
Tag: アニメーションスライドイン
http://mobify.github.io/bellows/

【bellows】レスポンシブなアコーディオンメニューを実装できるjQueryプラグイン

Lisence: MITライセンス
Tag: アコーディオンレスポンシブ
http://git.blivesta.com/animsition/

【animsition】アニメーションしながらページを表示させるjQueryプラグイン

さまざまなアニメーションをしながらページを表示するjQueryプラグイン。フェード、回転、スライドなど。

Lisence: MITライセンス
Tag: アニメーション
http://arbitrary-anchor.briangonzalez.org/

【arbitrary-anchor.js】スクロールするページ内リンクをid以外で指定できるjQueryプラグイン

ページ内リンクをidだけでなくclassなどでの指定可能。スクロール速度の変更もできます。

Lisence: MITライセンス
Tag: スクロール
http://jellekralt.github.io/Responsive-Tabs/demo/demo.html

【Responsive-Tabs】レスポンシブ対応のタブメニューを実装するjQueryプラグイン

レスポンシブ対応、画面サイズに応じてアコーディオンメニューになるタブメニューを実装するjQueryプラグイン。

Lisence: MITライセンス
Tag: アコーディオンタブレスポンシブ
http://dcdeiv.github.io/simple-sidebar/

【Simple Sidebar】スライドインするサイドバーを左右どちらにも設定できるjQueryプラグイン

シンプルなサイドバーをスライドインさせるjQueryプラグイン。左右どちらにも設定できます。

Lisence: GPLライセンス
Tag: アニメーションスライドイン
http://lab.victorcoulon.fr/javascript/scrolly/

【scrolly】パララックスなスクロールを実装するjQueryプラグイン

シンプルにパララックス効果を実装できるjQueryプラグイン

Lisence: MITライセンス
Tag: スクロールパララックス
http://alvarotrigo.com/fullPage/

【fullPage.js】1ページコンテンツ用のスクロールjQueryプラグイン

1ページコンテンツ用のスクロールを実装するjQueryプラグイン。垂直、水平にスクロールします。

Lisence: MITライセンス
Tag: スクロール
http://lirancohen.github.io/stickUp/

【stickUp】スクロールでナビゲーションを上部に固定するjQueryプラグイン

スクロールした後、ナビゲーションを上部に固定します。1ページサイト用のナビゲーションとしても使えます。

Lisence: GPLライセンス
Tag: スクロール位置固定
Smart Fixed Navigation

【Smart Fixed Navigation】メニューを右下に配置するjQueryプラグイン

マルチデバイスで利用可能です。 ページの右下にメニューアイコンが表示され、クリックするとメニュー一覧が展開されます。

Lisence: BSDライセンスMITライセンス
Tag: スマートフォン位置固定
jPages

【jPages】どんな要素にも簡単にページネーションを付けられるjQueryプラグイン

リスト要素など繰り返しを行う要素を指定することで、対象のリストを分割させます。1ページに表示する個数やアニメーションの指定などもできる便利なプラグインです。

Lisence: MITライセンス
Tag: アニメーションページめくりページネーション
Adtile Fixed Nav

【Responsive & Fixed One Page Nav】レスポンシブな固定ナビゲーションを実装する

Lisence: MITライセンス
Tag: レスポンシブ位置固定
http://tinynav.viljamis.com/

【TinyNav.js】画面サイズに応じてメニューをドロップダウンにするjQueryプラグイン

Lisence: MITライセンス
Tag: ドロップダウン
https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html

【jQuery-menu-aim】メガメニューを実装するjQueryプラグイン

amazon風のメガメニューを実装するjQueryプラグイン

Lisence: MITライセンス
Tag: メガメニュー
http://demo.tn34.de/jquery-plugins/facets/demo2.html

【Facets】マウスオーバーでアコーディオンのように画像が横に広がるナビゲーションjQueryプラグイン

画像またはグローバルメニューをクリックすると画像がアコーディオンのように開きます。

Lisence: GPLライセンス
Tag: アコーディオンアニメーションスライダー
http://www.geektantra.com/projects/jquery-megamenu-2/

【jQuery MegaMenu2】メガメニューを簡単に実現するjQueryプラグイン

テキストだけでなく、テーブルやフォームなどもメガメニューの中に表示できます。

Lisence: Apacheライセンス
Tag: メガメニュー
http://adobe-accessibility.github.io/Accessible-Mega-Menu/

【Accessible Mega Menu】レスポンシブなメガメニューjQueryプラグイン

レスポンシブ対応のメガメニューを実装できるjQueryプラグイン。

Lisence: Apacheライセンス
Tag: メガメニューレスポンシブ
http://slinky.iclanzan.com/

【Slinky】縦長ページに便利!スクロールにより積み重なるヘッダーを作れるjQueryプラグイン

スクロールしていくと、見やすい位置にきたヘッダーのコンテンツが表示されます。現在見ている位置より上のヘッダーは固定されていき、どんな内容があったか確認ができるため、縦長ページに最適です。

Lisence: MITライセンス
Tag: スクロール位置固定
http://tympanus.net/Development/GridNavigationEffects/example5.html

【Grid Navigation Effects】多彩なエフェクトが用意されたグリッドベースのナビゲーションjQueryプラグイン

多彩なエフェクトのナビゲーションでで魅了しましょう。

Lisence: クリエイティブコモンズ
Tag: ギャラリー
Slidebars

【Slidebars】レスポンシブ対応の横からメニューなどを表示するjQueryプラグイン

メニューやコンテンツを横からスライドして表示させます。オプションでさまざまな設定ができます。

Lisence: MITライセンス
Tag: レスポンシブ
http://kana-lier.com/demo/hidenavi/

【hidenavi.js】スクロールで隠れるナビゲーションメニューをつくるjQueryプラグイン

スクロールすると、ナビゲーションメニューがアニメーションしながら隠れ、代わりにメニューの位置を示す要素が表示されます。上にスクロールするとナビゲーションメニューが再表示されます。 特定のライセンス形態はとっていないようで […]

Lisence:
Tag: スクロール
http://tympanus.net/codrops/2011/03/09/animated-content-menu/

【Animated Content Menu with jQuery】滑らかすぎる動きがインパクト大のナビゲーション

全画面画像を変更させるナビゲーションです。ナビゲーションの各ラベルをクリックすると対応したパネルが滑らかなアニメーションとともに展開します。

Lisence: BSDライセンス
Tag: アニメーションエフェクト
http://www.justenallan.com/menuslider/

【menuSlider】メニューにスライドする背景やボーダーを設定するjQueryプラグイン

jQueryのメニュースライダー。マウスに追随してボーダーや背景がスライドします。IE8以下は角丸、透明な背景、IE7以下はボックスサイズをサポートしていません。

Lisence: MITライセンス
Tag: アニメーション
http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin/

【rCrumbs】長いパンくずリストをウィンドウサイズに合わせて変換するjQueryプラグイン

使用可能な画面幅のスペースに応じてパンくずリストのアイテム数を動的に変更するレスポンシブ対応のjQueryプラグイン。

Lisence: MITライセンス
Tag: パンくずリストレスポンシブ
http://devsmash.com/projects/kwicks

【Kwicks for jQuery】オシャレなナビゲーションを簡単に実装できるjQueryプラグイン

「Kwicks for jQuery」を使うと、ナビゲーションを簡単に実装することができます。オプションを変更するだけで色々なナビゲーションにすることができるので種類も豊富です。

Lisence: MITライセンス
Tag:
http://multi-level-push-menu.make.rs/demo/basichtml/basichtml.html

【Multi-level-push-menu】サイドからスライドインする多階層メニューをつくるjQueryプラグイン

多階層に対応したサイドからスライドインするナビゲーション。 階層の重ね方やナビゲーションのサイズをオプションで指定できます。

Lisence: MITライセンス
Tag: スライドイン多階層
http://markgoodyear.com/labs/scrollup/

【scrollUp jQuery plugin】ページの先頭へスクロールするjQueryプラグイン

ページの先頭へ戻るボタンを設置できます。どのくらいスクロールしたら表示させるか、表示する時のアニメーション、ページの先頭に戻るスピードなどを指定することができます。デザインのCSSが4パターン用意されています。

Lisence: MITライセンス
Tag: スクロール
http://popcircle.vinmein.com/

【Pop Circle】サークルに沿ってメニューが飛び出すjQueryプラグイン

円に沿ってアニメーションしながら飛び出すメニューを作成できます。メニューの位置調整、アニメーション、スピードなど指定することができます。

Lisence: MITライセンス
Tag: アニメーション
http://b3ckstage.github.io/CSS3-MenuSlider/

【CSS3-MenuSlider】モバイル対応のナビゲーションメニューをつくるjQueryプラグイン

CSS3 Menu Sliderを使えば、モバイルにも対応したサイドバーのナビゲーションメニューを実装することができます。パソコンのブラウザではナビゲーションメニューが全て表示され、ブラウザ幅が縮小されるとメニューアイコ […]

Lisence: MITライセンス
Tag: レスポンシブ
http://jimjh.com/box-lid/

【BoxLid】コンテンツが斜めに傾いてメニューが出現!立体的なメニューを実装するjQueryプラグイン

デモページの左端にマウスをもっていくと、ページ全体がずれてメニューが表示されます。CSS3対応のブラウザで実装が可能です。

Lisence: MITライセンス
Tag: アニメーション
http://flaviusmatis.github.io/simplePagination.js/

【simplePagination.js】ページネーションを実装するjQueryプラグイン

“light-theme”、”dark-theme”、”compact-theme”という3種類の基本テーマが入っていて簡単にクールなページネーショ […]

Lisence: MITライセンス
Tag: ページネーション
http://jedfoster.com/Readmore.js/

【Readmore.js】もっと読む、を簡単に実装できるjQueryプラグイン

もっと読む、を簡単に実装できるjQueryプラグイン。 ブログ等でよく見かける、「ReadMore」。クリックすることで全文が見れますが、サーバサイドでやるとリロードが必要になってしまいます。このプラグインを使えば、すぐ […]

Lisence: MITライセンス
Tag:
http://individual11.github.io/Scroll-To/#ease

【Scroll To】アニメーションスクロールをデフォルト化するjQueryプラグイン

アニメーションスクロールをデフォルト化できるプラグイン。一瞬で飛んでしまうスクロールより便利なので、デフォルト化してしまうのも一つの手かもしれません。 アニメーションの速度やスクロール位置のオフセット、アニメーションエフ […]

Lisence: MITライセンス
Tag: アニメーションスクロール
http://git.aaronlumsden.com/tabulous.js/

【Tabulous.js】切り替え時のエフェクトが印象的なタブメニューを作れるjQueryプラグイン

切り替え時のエフェクトが印象的なタブメニューを作れます。エフェクトは scale / slideLeft / scaleUp / flip の4種類。IE8,9はタブメニューは作れますが、エフェクトがかかりません。

Lisence: MITライセンス
Tag: エフェクトタブ
http://adnantopal.github.io/slimmenu/

【slimMenu】深い階層のメニューが作れるレスポンシブ対応jQueryプラグイン

深い階層のメニューが作れるレスポンシブ対応jQueryプラグイン。スマートフォンでも開閉できる深い階層のレスポンシブなメニューが作れます。同じページに複数のメニューを設置することも可能。

Lisence: MITライセンス
Tag: レスポンシブ
http://plugins.compzets.com/animatescroll/

【AnimateScroll】面白いページ内スクロールを実装できるjQueryプラグイン

さまざまな動き(エフェクト効果)を指定することが可能です。エフェクトの一覧は下記サイトから確認することができます。Easing function

Lisence: MITライセンス
Tag: エフェクトスクロール
http://theroux.github.io/clingify/

【Clingify】ページ上部にメニューなどを固定表示するjQueryプラグイン

ヘッダー等のメニューを上部に固定するだけでなく、ブレイクポイントを設定することで、ページの途中から固定する内容(要素)を変更することが出来ます。

Lisence: MITライセンス
Tag: 位置固定
http://webtrendset.com/demo/easy-responsive-tabs/Index.html

【Easy Responsive Tabs to Accordion】画面サイズに応じてタブメニューとアコーディオンメニューを切り替えるjQueryプラグイン

画面サイズに応じてタブメニューとアコーディオンメニューを切り替えます。タブは横方向・縦方向どちらにも対応。

Lisence: MITライセンス
Tag: アコーディオンタブレスポンシブ
http://www.benplum.com/formstone/naver/

【Naver】ナビゲーションをレスポンシブ対応のトグル型にするjQueryプラグイン

画面サイズによって、横並びのメニューとトグル型メニューを簡単に切り替えます。

Lisence: MITライセンス
Tag: レスポンシブ

【jquery Bottom】一番下までスクロールしたら自動的にコンテンツを表示するjQueryプラグイン

Lisence: GPLライセンスMITライセンス
Tag: スクロール

Page Top