[JS]ダイナミックで軽快なアニメーションを伴ったナビゲーション
Post on:2010年7月8日
sponsors
画像を一切使用せずに実装する、軽快なアニメーションを伴ったナビゲーションのチュートリアルを紹介します。
Awesome Cufonized Fly-out Menu with jQuery and CSS3
デモページ
デモでは右に配置されたナビゲーションの各ラベルにマウスホバーするとアニメーションでハイライトが移動し、それに伴う説明文が右からスライド表示されます。
HTML
HTMLは非常にシンプルです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<textarea name="code" class="html" cols="60" rows="5"> <div id="slidingMenuDesc" class="slidingMenuDesc"> <div><span>Maybe that's what life is... a wink of the eye and winking stars.</span></div> <div><span>Every man dies. Not every man really lives.</span></div> <div><span>It is your work in life that is the ultimate seduction.</span></div> <div><span>It's the friends you can call up at 4 a.m. that matter. </span></div> <div><span>We are time's subjects, and time bids be gone. </span></div> </div> <ul id="slidingMenu" class="slidingMenu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Get a quote</a></li> </ul> </textarea> |
CSS/JavaScript
スクリプトのベースにはjQueryが使用されており、各ソースは元記事を参照ください。
sponsors
