jQuery の LavaLampプラグイン を使用して、ラバランプ型メニューを表示します。
文字色や背景色等はCSSで指定しています。
LavaLamp for jQuery lovers のページから、プラグイン、CSS、画像等をZIP形式でダウンロードできます。

対象プラグインを、下記より入手してください。
* jQuery
* LavaLamp for jQuery lovers

サンプル

サンプルソース

JavaScript + CSS

<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery.easing.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.strollnet.com/js/jquery/css/lavalamp.css" />

<script type="text/javascript">
<!--
   $(function() {
      $("#1, #2, #3").lavaLamp({
         fx: "backout",
         speed: 700,
         click: function(event, menuItem){}
      });
   });
//-->
</script>

HTML

<p>
   <h2>With Image</h2>
   <ul class="lavaLampWithImage" id="1">
      <li class="current"><a href="#">メニュー１</a></li>
      <li><a href="#">メニューサンプル２</a></li>
      <li><a href="#">メニュー３</a></li>
      <li><a href="#">メニュー４</a></li>
   </ul>
</p>

<p>
   <h2>No Image</h2>
   <ul class="lavaLampNoImage" id="2">
      <li class="current"><a href="#">メニュー１</a></li>
      <li><a href="#">メニューサンプル２</a></li>
      <li><a href="#">メニュー３</a></li>
      <li><a href="#">メニュー４</a></li>
   </ul>
</p>

<p>
   <h2>Bottom Style</h2>
   <ul class="lavaLampBottomStyle" id="3">
      <li><a href="#">メニュー１</a></li>
      <li><a href="#">メニューサンプル２</a></li>
      <li class="current"><a href="#">メニュー３</a></li>
      <li><a href="#">メニュー４</a></li>
   </ul>
</p>