はじめに
第4回はサイト(ページ)には必ず用意されているメニュー、それに関するプラグインについて紹介していきます。
プラグインを使うことで、サイトを差別化するための機能的/デザイン的なメニューをシンプルなHTMLから簡単に作成することができます。
お薦めメニュー系プラグイン
メニューに関するjQueryプラグインもLightbox系のもの同様、様々なものが多数存在しています。今回も特徴的なもの3点をピックアップし、今回と次回、2回にわたり解説していきます。
- Kwicks
-
Kwicksはメニューの領域を、マウスオーバー/マウスアウトなどのイベントで収縮させるプラグインです。横方向のメニューだけでなく、縦方向のメニューにも利用することができ、収縮アニメーションのイージングや時間間隔も調整することができます(デモはこちらで確認できます)。
- jQuery Multi Level CSS Menu
-
jQuery Multi Level CSS Menuは横方向のメニューを作るためのプラグインです。単に一列にメニューを並べるだけでなく、入れ子になったメニューもドリルダウンする形で表現することができます。
- jQuery plugin: Accordion
-
jQuery plugin: Accordionはメニューというよりむしろ、アコーディオンを実現するためのプラグインと言えます。ただ、アコーディオンは縦方向のメニューと考えることもできるので、ここで紹介することにしました。ちなみにこのプラグインはjQuery UIでも使われています(デモはこちらで確認できます)。
Kwicks
Kwicksはulタグで作成したメニューのリストを、マウスオーバー/マウスアウトで各メニュー領域を収縮させるアニメーションを持つメニューにするプラグインです。簡単な使い方と、いくつかのオプション、その効果を解説していきます。
ダウンロード&展開
まずはこちらから、Kwicks-1.5.1.zipをダウンロードしましょう。ダウンロードファイルを展開すると、必要なJSファイル、CSSファイル、そしてサンプルのHTMLファイルが取得できます。
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 |
マウスアウト時に狭まるメニュー領域のサイズ |
実際このコードを動作させると、マウスオーバーしたときはメニューの領域がmaxで指定した大きさまで広がり、逆にマウスアウトすると、もとの大きさまで戻るアニメーションを確認することができます。
縦方向のメニュー
縦方向のメニューも簡単に作成することができます。
1. ulタグのclass属性のhorizontalをverticalに変更する
horizontalをverticalに変更した以外、HTMLは横方向メニューとまったく同じです。
2. kwicksメソッドの引数に入れるオプションでisVerticalをtrueに指定する
横方向メニューのKwicksオプションに"isVertical: true"を追記するだけです。
メニューが垂直方向に並び、アニメーションも垂直方向に伸縮するようになります。
その他のオプション
spacing
メニュー間のスペースの大きさです(デフォルトは0)。
各メニューの間にspacingで指定した大きさの余白が入ります。
duration
メニューの収縮アニメーションにかかる時間です(デフォルトは200)。
easing
収縮アニメーションのイージングに関する設定です。このオプションを使うには、前述したjquery.easing.1.3.jsをあらかじめ読み込む必要があります(デフォルトは指定なし。指定できるイージングの種類はこちらを参照してください)。
event
収縮アニメーションを開始するイベントです。mouseover、click、dbclickなどを指定します(デフォルトはmouseover)。
sticky/defaultKwick
最初から開いているメニューを指定できます。左から二番目のメニューをその状態にするにはstickyをtrueにし、さらにdefaultKwickを1を指定します。defaultKwickの番号は横方向のメニューなら一番左が、縦方向のメニューなら一番上が0となります(デフォルトはstickyがfalse、defaultKwickが0)。
上記オプションの調整だけでなくCSS(main.css)や各メニューのスタイルを調整することにより、さらなる見た目のカスタマイズも可能となり、実際のサイトに適したデザインに調整していくこともできます。
まとめ
今回はjQueryのお薦めメニュー系プラグインの紹介と、その中のKwicksを説明しました。一味違う動きのあるメニューで、サイトをよりリッチに彩ってみてください。
次回は、お薦めメニュー系プラグインの残り2つ、jQuery Multi Level CSS MenuとAccordionの使い方を説明していきます。