<link rel="stylesheet" type="text/css" href="lavalamp.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>

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

<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>