[JS]次々にボックスがアニメーションでスライドするナビゲーションを実装するチュートリアル

次々にボックスがスライドする三つのアニメーションを組み合わたナビゲーションを実装するチュートリアルを紹介します。

デモのキャプチャ

Slide Down Box Menu with jQuery and CSS3
デモページ

デモではナビゲーションの各項目をマウスホバーすると、アニメーションでラベルが下にストンと落ち、サムネイル画像が拡大表示されます。更に、下位階層のある項目は左右にスライド表示されます。

実装は割とシンプルです。
ナビゲーションはリスト要素で配置されています。

HTML

アニメーションは、jQueryをベースにスクリプトで実装されています。
JavaScriptやCSSはサイトで公開されており、コードのダウンロードもできます。

top of page

Trackback

leave your Comments

※承認制のため、即時には反映されません。
※匿名、通りすがりさんなどへの回答は控えさせていただきます。

Comments

links for 2010-07-27 « 個人的な雑記

on 2010年7月28日

[...] [JS]次々にボックスがアニメーションでスライドするナビゲーションを実装するチュートリアル | コリス (tags: jquery menu library) [...]

top of page

©2011 coliss