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>

以上で、エフェクトや選択時／非選択時の色の変化がついたアコーディオンメニューが作成できます。

サンプル

メニュー1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eu elit. Sed consequat neque et sapien. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Donec justo dui, aliquam ac, feugiat nec, malesuada ac, enim. Etiam consequat nulla eget metus malesuada tincidunt. Ut ultrices nonummy metus. Pellentesque pharetra neque eu urna. In nec ligula. Curabitur purus ligula, consectetuer id, auctor et, gravida pretium, est. Aenean vitae neque. Integer dolor enim, ultricies semper, ullamcorper at, mollis at, mauris.

メニュー2

メニュー3

Javascriptサンプルページ一覧

skuare.net