JavaScriptによるアコーディオンメニュー

Date:2007/10/05 23:25

ウェブサイト（ホームページ）、ブログの左側・右側にメニューを表示するのは、よく見かけるウェブデザインの１つです。

しかし、そのメニュー部分が非常に長くなってしまうと、ページが縦に長くなってしまい、結果、自分のサイトを訪れてくれる方にとって見づらいものとなることがあります。

その縦長のメニューを解決する方法として、JavaScriptによる「アコーディオンメニュー」を紹介します。

１つは非常にシンプルで軽いアコーディオンメニュー、もう一つはAjaxライブラリの prototype.js と Rico を利用したリッチなアコーディオンメニューです。

まずは、シンプルで軽いアコーディオンメニューです。
⇒Simple Javascript Accordions
⇒サンプル（Simple Accordions）

本家サイトに圧縮ファイルがあるので、それをダウンロードし、ローカルマシンで動かしてみることができます。

実装の仕方はソースに書かれているコメントを見れば分かるかと思います（結構詳しく書かれています）。

なによりもコードを記述しているJavaScriptファイルが軽いのが特徴です。

もう一つは、色々動かせるアコーディオンメニュー。
⇒Accordion Plus
⇒サンプル

上記サンプル以外にもサンプルアコーディオンメニューがあることからも分かるように、様々なアコーディオンメニューを作成できるとが特徴です。

シンプルなものと同様、こちらもサンプル一式がダウンロードできるので、ローカルマシンで動かしてみるといいでしょう。

いろいろできるだけあって、必要となるJavaScriptファイルはそのままだと130KBあるそうです。
が、まとめて圧縮したもの、さらにphpが実行できる環境ならば20KBまで圧縮されたファイルも添付されています。