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

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

使用方法
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」でアコーディオンメニューサンプル

sponsors

「javascriptライブラリ「mootools」でアコーディオンメニュー」をシェアする

記事作成:
記事URL:

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