[JS]ダイナミックで軽快なアニメーションを伴ったナビゲーション

画像を一切使用せずに実装する、軽快なアニメーションを伴ったナビゲーションのチュートリアルを紹介します。

Awesome Cufonized Fly-out Menu with jQuery and CSS3
デモページ

デモでは右に配置されたナビゲーションの各ラベルにマウスホバーするとアニメーションでハイライトが移動し、それに伴う説明文が右からスライド表示されます。

HTML

HTMLは非常にシンプルです。

<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>