jQueryプラグインで彩る、ワンランク上のサイト制作

第4回メニューを彩るプラグイン(1)

はじめに

第4回はサイト(ページ)には必ず用意されているメニュー、それに関するプラグインについて紹介していきます。

プラグインを使うことで、サイトを差別化するための機能的/デザイン的なメニューをシンプルなHTMLから簡単に作成することができます。

お薦めメニュー系プラグイン

メニューに関するjQueryプラグインもLightbox系のもの同様、様々なものが多数存在しています。今回も特徴的なもの3点をピックアップし、今回と次回、2回にわたり解説していきます。

Kwicks

Kwicksはメニューの領域を、マウスオーバー/マウスアウトなどのイベントで収縮させるプラグインです。横方向のメニューだけでなく、縦方向のメニューにも利用することができ、収縮アニメーションのイージングや時間間隔も調整することができます(デモはこちらで確認できます⁠⁠。

図1 Kwicks
Kwicks
jQuery Multi Level CSS Menu

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

図2 jQuery Multi Level CSS Menu
jQuery Multi Level CSS Menu
jQuery plugin: Accordion

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

図3 jQuery plugin: Accordion
jQuery plugin: Accordion

Kwicks

Kwicksはulタグで作成したメニューのリストを、マウスオーバー/マウスアウトで各メニュー領域を収縮させるアニメーションを持つメニューにするプラグインです。簡単な使い方と、いくつかのオプション、その効果を解説していきます。

ダウンロード&展開

まずはこちらから、Kwicks-1.5.1.zipをダウンロードしましょう。ダウンロードファイルを展開すると、必要なJSファイル、CSSファイル、そしてサンプルのHTMLファイルが取得できます。

図4 展開したフォルダ
展開したフォルダ

jsファイル下には、Kwicksを動作させるために必要な4つのJSファイルが置かれています。

jquery-1.2.6.min.js
言わずも知れた、jQuery本体です。当然、必須のファイルとなります。
jquery.kwicks-1.5.1.js
Kwicks本体です。こちらはソースが読みやすい状態になっています(その分、次のjquery.kwicks-1.5.1.pack.jsよりファイルサイズが大きくなります⁠⁠。
jquery.kwicks-1.5.1.pack.js
こちらもKwicks本体ですが、ファイルサイズを小さくするためソースが非常に読みづらくなっています。実際に利用するのはjquery.kwicks-1.5.1.jsではなく、こちらでしょう。
jquery.easing.1.3.js
Kwicksのオプションのひとつであるイージングを利用するときに必要となります。イージングを利用しなければ、このファイルも読み込む必要はありません。

基本的な使い方

以下のコードを見るとわかりますが、使い方は非常に簡単です。

1. メニューリストを作成する

まずはulタグでメニューのリストを作成します。注意点として、ulのclass属性にkwicksを指定する必要があります。さらに横方向のメニューの場合はhorizontalも指定する必要があります(縦方向の場合はverticalを指定します⁠⁠。

また必要に応じてliタグにidまたはclass属性を指定し、CSSファイルに対応する必要なスタイルを記述しておきます。

2. kwicksクラスがついたulタグにkwicksメソッドを実行する

上記で作成したulタグにkwicksメソッドを実行すると、Kwicksのメニューになります(収縮のアニメーションも機能するようになります⁠⁠。

kwicksメソッドは引数にオプションを指定するようになっており、ここでは必須オプションのmaxを指定しています(もしくはminのどちらか一方を必ず指定します⁠⁠。

オプション説明
max マウスオーバー時に広がるメニュー領域のサイズ
min マウスアウト時に狭まるメニュー領域のサイズ
リスト1 基本コード
<head>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
  <script src="js/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
  <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
  <script type="text/javascript">
    $().ready(function() {
      <!-- 2. kwicksクラスがついたulタグにkwicksメソッドを実行 -->
      $('.kwicks').kwicks({
        max : 200
      });
    });
  </script>
</head>
<body>
  <!-- 1. メニューリストの作成 -->
  <ul class="kwicks horizontal" >
    <li id="kwick_1">メニュー1</li>
    <li id="kwick_2">メニュー2</li>
    <li id="kwick_3">メニュー3</li>
    <li id="kwick_4">メニュー4</li>
  </ul>
</body>
リスト2 main.cssの一部
#kwick_1 { 
  background-color: #53b388;
}
#kwick_2 {
  background-color: #5a69a9;
}
#kwick_3 {
  background-color: #c26468;
}
#kwick_4 { 
  background-color: #bf7cc7;
}
.kwicks.horizontal #kwick_4 {
  margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */
}
.kwicks.vertical #kwick_4 {
  margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
}

実際このコードを動作させると、マウスオーバーしたときはメニューの領域がmaxで指定した大きさまで広がり、逆にマウスアウトすると、もとの大きさまで戻るアニメーションを確認することができます。

図5 メニュー2をマウスオーバー
メニュー2をマウスオーバー

縦方向のメニュー

縦方向のメニューも簡単に作成することができます。

1. ulタグのclass属性のhorizontalをverticalに変更する

horizontalをverticalに変更した以外、HTMLは横方向メニューとまったく同じです。

リスト3 classにverticalを指定
<ul class="kwicks vertical" >
  <li id="kwick_1">メニュー1</li>
  <li id="kwick_2">メニュー2</li>
  <li id="kwick_3">メニュー3</li>
  <li id="kwick_4">メニュー4</li>
</ul>

2. kwicksメソッドの引数に入れるオプションでisVerticalをtrueに指定する

横方向メニューのKwicksオプションに"isVertical: true"を追記するだけです。

リスト4 縦方向のメニュー
$('.kwicks').kwicks({
  max       : 200,
  isVertical: true
});

メニューが垂直方向に並び、アニメーションも垂直方向に伸縮するようになります。

図6 isVerticalオプションをtrue
isVerticalオプションをtrue

その他のオプション

spacing

メニュー間のスペースの大きさです(デフォルトは0⁠⁠。

リスト5 spacing: 10
$('.kwicks').kwicks({
  max    : 200,
  spacing: 10
});

各メニューの間にspacingで指定した大きさの余白が入ります。

図7 spacing: 10
spacing: 10

duration

メニューの収縮アニメーションにかかる時間です(デフォルトは200⁠⁠。

リスト6 duration: 50
$('.kwicks').kwicks({
  max     : 200,
  duration: 50
});

easing

収縮アニメーションのイージングに関する設定です。このオプションを使うには、前述したjquery.easing.1.3.jsをあらかじめ読み込む必要があります(デフォルトは指定なし。指定できるイージングの種類はこちらを参照してください⁠⁠。

リスト7 easing: "easeInBounce"
$('.kwicks').kwicks({
  max   : 200,
  easing: "easeInBounce"
});

event

収縮アニメーションを開始するイベントです。mouseover、click、dbclickなどを指定します(デフォルトはmouseover⁠⁠。

リスト8 event: "click"
$('.kwicks').kwicks({
  max  : 200,
  event: "click"
});

sticky/defaultKwick

最初から開いているメニューを指定できます。左から二番目のメニューをその状態にするにはstickyをtrueにし、さらにdefaultKwickを1を指定します。defaultKwickの番号は横方向のメニューなら一番左が、縦方向のメニューなら一番上が0となります(デフォルトはstickyがfalse、defaultKwickが0⁠⁠。

リスト9 sticky: true, defaultKwick: 1
$('.kwicks').kwicks({
  max         : 200,
  sticky      : true,
  defaultKwick: 1
});

上記オプションの調整だけでなくCSS(main.css)や各メニューのスタイルを調整することにより、さらなる見た目のカスタマイズも可能となり、実際のサイトに適したデザインに調整していくこともできます。

まとめ

今回はjQueryのお薦めメニュー系プラグインの紹介と、その中のKwicksを説明しました。一味違う動きのあるメニューで、サイトをよりリッチに彩ってみてください。

次回は、お薦めメニュー系プラグインの残り2つ、jQuery Multi Level CSS MenuとAccordionの使い方を説明していきます。

おすすめ記事

記事・ニュース一覧