Tweet｜ ｜ ｜ ｜

[ 2分で読めて簡単導入できます]

サイトを制作する際に重要なのがメニューで、メニューの項目が増えるとアコーディオン形式のメニューが重宝されます。
今回は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日