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

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

デモのキャプチャ

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

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

HTML

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

CSS/JavaScript

スクリプトのベースにはjQueryが使用されており、各ソースは元記事を参照ください。

sponsors

top of page

©2019 coliss