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

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

この記事を読むのに必要な時間:およそ 4 分

前回に引き続き,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,画像一式をダウンロードしましょう。

図1 ダウンロード

図1 ダウンロード

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

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

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

図2 フォルダ

図2 フォルダ

HTMLの作成

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

図3 サンプル

図3 サンプル

著者プロフィール

iret R&D team

iret社内の有志によるインフォーマルな技術者集団。社内の各スペシャリストで構成され,Flash制作からサーバ運用まで,インターネットに関する様々な案件に対し最前線で活躍する。その傍ら,講師業や執筆業なども行っている。

URL:http://www.iret.co.jp/

コメント

コメントの記入