くずWebデザイナーのなれの果て

仕事でLavaLampを導入しました。
簡単に設置できず試行錯誤したので、今後LavaLampを使ってみたい人向けの参考にまとめを載せておきます。

LavaLampはjQuery(Javascript)を使用したリッチメニューです。グローバルナビゲーションを格好良く見せることができます。
詳細はコチラのページ(英語)に書かれています。

導入方法

導入方法は2種類あります。ただ、パッケージとして提供されているものについては環境によりクリックできない可能性があり、完全解析するより個別導入した方が早そうなので個別導入方法で説明します。

• 上記ページのStep 3: The Javascript項目下にあるdownload jQuery here, Easing plugin here, and the LavaLamp plugin here.から3つともDLします。
  ※jQueryはバージョンにより動作制限があるかも知れません。私が導入した時のバージョンはjQuery1.2.6です。
• 各ファイルを格納場所(自分で決めて良い)に格納し、Step 3: The Javascript項目を参考に呼び出します。
  PLAIN TEXT
  HTML:

  1. <script type="text/javascript" src="path/to/jquery.js"></script>
  2. <script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>
  3. <!-- Optional -->
  4. <script type="text/javascript" src="path/to/jquery.easing.js"></script>
  5. <script type="text/javascript">
  6.     $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
  7. </script>

• CSSはUpdate項目にあるDownload the zip fileをDL、解凍してlavalamp_test.cssの必要な箇所を取り出して、JSファイル同様に呼び出します。
  PLAIN TEXT
  HTML:

  1. <link rel="stylesheet" href="lavalamp_test.css" type="text/css" media="all">

• HTMLにリストタグでメニューを記述します。
  PLAIN TEXT
  HTML:

  1. <ul class="lavaLamp">
  2.             <li><a href="#">Home</a></li>
  3.             <li><a href="#">Plant a tree</a></li>
  4.             <li><a href="#">Travel</a></li>
  5.             <li><a href="#">Ride an elephant</a></li>
  6.         </ul>

• ※初期位置を決めるにはリストタグにクラスをセットします。
  PLAIN TEXT
  HTML:

  1. <li class="current">