skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

javascriptライブラリ「mootools」でアコーディオンメニュー

｜ ｜ ｜ ｜ ｜ ｜ ｜

サイトを制作する際に重要なのがメニューで、メニューの項目が増えるとアコーディオン形式のメニューが重宝されます。
今回はjavascriptライブラリ「mootools」でアコーディオンメニューを作成します。
via : Mootools: horizontal accordions explained

使用方法
mootoolsからmootools.jsを、また今回使用するaccordion.jsをダウンロードします。
<script type="text/javascript" src="http://yourdomain/mootools.js"></script>
<script type="text/javascript" src="http://yourdomain/accordion.js"></script>
<style type="text/css">
.accToggler{margin: 3px;padding: 3px;width: 400px;background: #acc95f;color: #f4f4f4;border: 1px solid #fff;cursor: pointer;}
.accContent{margin: 0px;padding: 3px;width: 400px;}
a, a:visited{color:#6d6d6d;}
</style>
上記の通り記述したら、メニューとなるコンテンツを以下のように書きます。
<p class="accToggler">Click</p>
<p class="accContent">
コンテンツ
</p>
以上で、エフェクトや選択時／非選択時の色の変化がついたアコーディオンメニューが作成できます。
javascriptライブラリ「mootools」でアコーディオンメニューサンプル

記事作成：2007年12月02日

前の記事：開閉するサイドバーを作成するjavascript「PBB SideBar」
次の記事：入力方法を指定するjavascript「Mask JavaScript API」