[CSS]CSS3を使って実装する、かわいらしいLavaLampナビゲーション

LavaLampとはカーソルに伴ってハイライトした光源が移動するエフェクトで、LavaLamp for jQuery lovers!にあるようなものです。

CSS3の角丸やボックスシャドウ、アニメーションを使用してこのエフェクトを実装するチュートリアルをINSIC DESIGNSから紹介します。

Creating a Fancy menu using CSS3 and jQuery
デモページ

デモはCSS3に対応したChrome、Safariで動作をします。

Chromeでのキャプチャ

ナビゲーションはリスト要素で実装されており、画像を使用していないためカラーの変更もスタイルシートで簡単に行えます。

カラーの変更はスタイルシートで

ナビゲーションのアクティブ時の処理にはjQueryが使用されています。