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

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

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

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

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

HTML

<ul id="sdt_menu" class="sdt_menu">
<li>
		<a href="#">
			<img src="images/1.jpg" alt=""/>
			<span class="sdt_active"></span>
			<span class="sdt_wrap">
				<span class="sdt_link">Portfolio</span>
				<span class="sdt_descr">My work</span>
			</span>
		</a>
<div class="sdt_box">
			<a href="#">Websites</a>
			<a href="#">Illustrations</a>
			<a href="#">Photography</a>
		</div>
</li>

	...
</ul>

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

Post on:2010年7月27日