【Javascript】jQuery メニュープラグインLavaLamp

前回は、文字などを飾るドロップシャドウをJavaScriptで動的に作れるプラグインを紹介しましたが、 今回は、メニューを飾るjQuery プラグインLavaLampを紹介します。

• jQuery
  • jquey.jsのダウンロード
• LavaLamp
  • デモやダウンロード
• jQueryのダウンロードと設置

LavaLamp

このLavaLampは、もともとMootoolsのために書かれたスクリプトがjQuery用にリライトされたもの(CSS+Javascript power. Fancy menu)で、700バイトという軽量なコードです。

では、 さっそく、サンプルを作ってみましょう。下のメニューにカーソルで触れてみてください。


LavaLampを使うためには、jQuery本体のほかに、上記LavaLamp のサイトでjquery.lavalamp.min.jsを入手しますが、バージョンに注意が必要です。

2008年4月現在のjQueryバージョンは、v1.2.3でv1.2xという系列になりますが、現在LavaLamp のサイトで紹介されているコードと、圧縮ファイルはjQueryのバージョンv1.1x用になっています。

ほとんど違わないのですが、ほんの少し修正が必要な場所があり、その修正後のファイルはここにあります。現在入手できるのは、LavaLampのVersion: 0.2.0となっています。

ちなみに、どんな問題があり、どんな修正アプローチなのかなどについては、LavaLampサイトのコメントが参考になります。

次に、jQuery Easingプラグインを入手します。これは、Easingエフェクトを拡張したものですが、これは jQuery UI アコーディオンの記事の時にも利用したものと 同じでここで現在v1.1.1を入手できます。

まず、これらのjsファイルを次のようにして読み込みます。

<script type="text/javascript" 
        src="./jquery.1.2.3.min.js"></script>
<script type="text/javascript" 
        src="./jquery.easing.1.1.js"></script>
<script type="text/javascript" 
        src="./jquery.lavalamp.0.2.0.js"></script>

これで、準備が整います。

では、次ページで順番にソースを見てみます。