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

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

デモのキャプチャ

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

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

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

HTML

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

sponsors

top of page

©2019 coliss