第5回　メニューを彩るプラグイン（2）

前回に引き続き、Lightbox風プラグイン（jQuery Multi Level CSS Menu、jQuery plugin: Accordion）を紹介していきます。

jQuery Multi Level CSS Menuは横方向のメニューを作るためのプラグインであり、入れ子になったメニューまで表現することができます。

一方、jQuery plugin: Accordionは縦方向のメニューと考えることもできるアコーディオンを実現するためのプラグインとなっています。

jQuery Multi Level CSS Menu

jQuery Multi Level CSS Menuは横方向のメニューを作るためのプラグインです。単に一列にメニューを並べるだけでなく、入れ子になったメニューもドリルダウンする形で表現することができます。

ダウンロード

まずは配布サイトからJavaScript、CSS、画像一式をダウンロードしましょう。

下記ファイルを、ブラウザから別々にダウンロードする必要があります。

jquerycssmenu.css
jquerycssmenu.js
tintblue.gif
tintbluedark.gif
arrow-down.gif
arrow-right.gif

ダウンロードしたファイルは同一フォルダに置き、その中でHTMLファイルも作成します。また、jQueryのプラグインなので、当然、jQuery本体もダウンロードしておく必要もあります。

HTMLの作成

必要なものをそろえることができたら、次は実際にHTMLを作成していきます。今回は配布サイトのサンプルで紹介されているコードをベースにしたものについて、解説を行っていきます。

CSS/JavaScriptの読み込み

HTMLのHEAD部分でCSSとJavaScriptの読み込みを行います。

リスト1　HEAD部分

<head>
  <link rel="stylesheet" type="text/css" href="jquerycssmenu.css" />
  <!--[if lte IE 7]>
  <style type="text/css">
    html .jquerycssmenu{height: 1%;} /*Holly Hack for IE7 and below*/
  </style>
  <![endif]-->
  <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
  <script type="text/javascript" src="jquerycssmenu.js"></script>
<head>

IE7に対応させるためのスタイルシートのハックも入っています。ハックがない場合は、IE7では横線がメニューの下部ではなく、中断に表示されてしまいます。

メニューの作成

実際のメニューの作成ですが、まず、id="myjquerymenu"、
class="jquerycssmenu"のdivタグを用意します。その中で、リスト（ul/liタグ）を用いてメニューを表現します。入れ子の構造もul/liタグの入れ子で表現することができ、何階層も入れ子にすることができます。

リスト2　BODY部分

<body>
  <div id="myjquerymenu" class="jquerycssmenu">
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Folder 1</a>
        <ul>
          <li><a href="#">Sub Item 1.1</a></li>
          <li>><a href="#">Sub Item 1.2</a></li>
          <li><a href="#">Sub Item 1.3</a></li>
          <li><a href="#">Sub Item 1.4</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Folder 2</a>
        <ul>
          <li><a href="#">Sub Item 2.1</a></li>
          <li><a href="#">Folder 2.1</a>
            <ul>
              <li><a href="#">Sub Item 2.1.1</a></li>
              <li><a href="#">Sub Item 2.1.2</a>></li>
              <li><a href="#">Folder 3.1.1</a>
                <ul>
                  <li><a href="#">Sub Item 3.1.1.1</a></li>
                  <li><a href="#">Sub Item 3.1.1.2</a></li>
                  <li><a href="#">Sub Item 3.1.1.3</a></li>
                  <li><a href="#">Sub Item 3.1.1.4</a></li>
                  <li><a href="#">Sub Item 3.1.1.5</a></li>
                </ul>
              </li>
              <li><a href="#">Sub Item 2.1.4</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Item 4</a></li>
    </ul>
    <br style="clear: left" />
  </div>
</body>

カスタマイズについて

あまりカスタマイズ性が高いプラグインとはいえませんが、まず考えれることは画像の差し替えです。ダウンロードした四つの画像は下記のように使われています。これらをオリジナルの画像に変更することは容易にできるはずです。

arrow-down.gif: 下矢印を表す画像です。
arrow-right.gif: 右矢印を表す画像です。
tintblue.gif: メニュー上部の画像（フォーカス前）です。
tintbluedark.gif: メニュー上部の画像（フォーカス中）です。

また難易度は高くなりますが、CSS（jquerycssmenu.css）の変更も現実的なカスタマイズ方法となります。

jQuery plugin: Accordion

jQuery plugin: Accordionはメニューというよりむしろ、アコーディオンを実現するためのプラグインと言えます。ただ、アコーディオンは縦方向のメニューと考えることもできるので、今回紹介することにしました。ちなみにこのプラグインはjQuery UIでも使われています。

ダウンロード

まずは配布サイトから一式をダウンロードしましょう。

展開したフォルダの中で、必要なファイルは以下のJavaScriptとなります。

lib/jquery.js: jQuery本体で、必須となります。
lib/jquery.dimensions.js: 位置情報を取得するためのjQueryプラグインで、必須となります。
lib/jquery.easing.js: イージングアニメーションを実現するためのプラグインで、オプションとなります。
jquery.accordion.js: Accordionプラグイン本体で、当然、必須となります。

これらを同一フォルダに置き、そのフォルダの中でHTMLを作成していきます。

HTMLの作成

まずはAccordionを実現する基本的なHTMLです。

リスト3　基本的なHTML

<head>
  <!-- 1. JavaScriptの読み込み -->
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.dimensions.js"></script>
  <script type="text/javascript" src="jquery.easing.js"></script>
  <script type="text/javascript" src="jquery.accordion.js"></script>
  <!-- 3. Accordionプラグインの適用 -->
  <script>
    $(function(){
      $("#example").accordion();
    });
  </script>
</head>
<body>
  <!-- 2. リストの作成 -->
  <ul id="example">
    <li>
      <a href='#'>Test 1</a>
      <div>Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1</div>
    </li>
    <li>
      <a href='#'>Test 2</a>
      <div>Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2</div>
    </li>
    <li>
      <a href='#'>Test 3</a>
      <div>Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3</div>
    </li>
  </ul>
</body>

1. JavaScriptの読み込み

Accordionに必要なJavaScriptの読み込みを行います。ただし、jquery.easing.jsは必須ではなく、アニメーションにイージングを使うときのみ必要なオプションとなります。

2. リストの作成

リスト（ul/liタグ）を用いてAccordionの内容を作成します。

3. Accordionプラグインの適用

ulタグ（id="example"）に対して、Accordionプラグインを適用します。引数に後述するオプションを指定することもできます。

現状CSSを当てていないので、ブラウザの標準的な表示でのAccordionとなっています。リストで用いる適切なCSS、画像を作成することで、サイト（ページ）デザインに違和感なく導入することが可能となります。

オプション

JavaScript(jQuery)で対象のタグにAccordionプラグインを適用するとき、その引数には、さまざまなオプションを適用することができます。オプションは、以下のように設定することができます

リスト4　オプションの指定

$("#example").accordion({
  active    : ".current",
  alwaysOpen: true,
  animated  : "bounceslide",
  autoHeight: true,
  clearStyle: true,
  event     : "mouseover",
  fillSpace : true,
  header    : "a.head",
});

active: 指定されたクラスを持つliタグ中のヘッダ（デフォルトはaタグ）を初期表示時に展開します。デフォルトでは、一番上のメニューが展開されます。

※　ヘッダはメニュー名となり、閉じているときにも表示される部分です。

alwaysOpen: trueを指定すると、常にどこかのメニューが展開されている状態になります。falseを指定すると展開しているメニューをクリックするとメニューが閉じ、メニューがすべて閉じている状態にすることができます。
animated: メニューを展開したり、閉じたりするときのアニメーションを指定します。

オプション	説明
false	アニメーションはしません。
"slide"	スライドアニメーションです。デフォルト値でもあります。
"bounceslide"	バウンドアニメーションです。easingプラグインが必要になります。
"easeslide"	イージングアニメーションです。easingプラグインが必要になります。

autoHeight: trueを指定すると、すべての展開後のメニューの高さが最大のものにそろえられます。
event: メニューと展開したり閉じたりするときのマウスイベントです。デフォルトはclickになっています。
fillSpace: trueを指定すると、親要素の高さを埋める形でメニューを展開します。
header: liタグ中のヘッダのセレクタを指定します。

※　ヘッダはメニュー名となり、閉じているときにも表示される部分です。

まとめ

今回はjQuery Multi Level CSS Menuを用いた横方向のメニューと、jQuery plugin: Accordionを用いた縦方向のメニューについて紹介してきました。

どちらも、画像、CSSを用意することで簡単に、サイト（ページ）デザインに合った形で導入することができるはずです。

次回はエフェクト系のプラグインを紹介します。