[JS]ドリルダウンやフライアウトなど、アニメーションのエフェクトを持つナビゲーションのスクリプト -fg.menu

iPod風のドリルダウン型、飛び出すエフェクトのフライアウト型、シンプルなドロップダウン型など、アニメーションのエフェクトを持ったナビゲーションのスクリプトをfilament groupから紹介します。

デモのキャプチャ

Dropdown, iPod Drilldown, and Flyout styles
demo: drilldown

上記のデモでは、クリックした項目のパネルが次々にスライドするドリルダウン型のナビゲーションで、上部にはパンくずが実装されています。

パンくず機能の代わりに、戻る機能の「Back」ボタンが実装されているものもあります。

デモのキャプチャ

demo: drilldown

下記は、飛び出すエフェクトのフライアウト型のナビゲーションです。選択した箇所が、次々に飛び出します。

デモのキャプチャ

demo: flyout

最後は、シンプルなドロップダウン型のナビゲーションです。シンプルながらも気持ちいいアニメーションで開閉します。

デモのキャプチャ

demo: dropdown

fg.menuはjQueryのプラグインのため、実装はjquery.jsが必要です。
jQuery.UIを使用することでデザインを簡単に変更できます。

sponsors

top of page

©2018 coliss