Ajaxを使おう
掲載日： 2008年 04月 17日
jQuery メニュープラグインLavaLamp
jQuery メニュープラグインLavaLamp
前回は、文字などを飾るドロップシャドウをJavaScriptで動的に作れるプラグインを紹介しましたが、 今回は、メニューを飾るjQuery プラグインLavaLampを紹介します。
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>
これで、準備が整います。
では、次ページで順番にソースを見てみます。
