[JS]次々にボックスがアニメーションでスライドするナビゲーションを実装するチュートリアル
Post on:2010年7月27日
sponsors
次々にボックスがスライドする三つのアニメーションを組み合わたナビゲーションを実装するチュートリアルを紹介します。
Slide Down Box Menu with jQuery and CSS3
デモページ
デモではナビゲーションの各項目をマウスホバーすると、アニメーションでラベルが下にストンと落ち、サムネイル画像が拡大表示されます。更に、下位階層のある項目は左右にスライド表示されます。
実装は割とシンプルです。
ナビゲーションはリスト要素で配置されています。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<textarea name="code" class="html" cols="60" rows="5"> <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> </textarea> |
アニメーションは、jQueryをベースにスクリプトで実装されています。
JavaScriptやCSSはサイトで公開されており、コードのダウンロードもできます。
sponsors
