LavaLamp for jQuery lovers! - jQueryを利用したFlashみたいなメニュー

With Image

• ホーム
• javascript
• Google API
• カスタマイズ

No Image

• ホーム
• javascript
• Google API
• カスタマイズ

Bottom Style

• ホーム
• javascript
• Google API
• カスタマイズ

外部のCSSとjavascriptを読み込み、javascriptを記述します。speedを変更すると動きの早さが変わります。

<link rel="stylesheet" href="lavalamp_test.css" type="text/css" media="screen">
<script type="text/javascript" src="jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout", 
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
</script>

htmlは下のとおりでCSSのclassを上の3種類から選べます。

<ul class="lavaLampWithImage" id="1">
<li><a href="#">ホーム</a></li>
<li><a href="http://weboook.blog22.fc2.com/blog-category-2.html">javascript</a></li>
<li><a href="http://weboook.blog22.fc2.com/blog-category-2.html">Google API</a></li>
<li><a href="http://weboook.blog22.fc2.com/blog-category-7.html">カスタマイズ</a></li>
</ul>