水平方向のアコーディオンメニュー「horizontal accordion」-JavaScript Library Archive

水平方向のアコーディオンメニュー「horizontal accordion」

配布元：Horizontal JavaScript Accordion 1kb
ライセンス：商用でも個人でも無料

horizontal accordionは水平方向のアコーディオンメニューを作成する為のJavaScriptライブラリです。

ダウンロードしたslidemenu.jsをhead要素などで読み込みます。

<script type="text/javascript" src="slidemenu.js"></script>

アコーディオン部分はul要素とli要素でマークアップします。ul要素には任意のID属性を付けてください。

<ul id="任意のID">
	<li><p>あいうえお</p></li>
	<li><p>かきくけこ</p></li>
	<li><p>さしすせそ</p></li>
	<li><p>たちつてと</p></li>
</ul>

slideMenu.buildでアコーディオンの設定を行います。

<script type="text/javascript">
window.onload = function(){
	slideMenu.build('任意のID',拡大時の横幅,拡大のスムーズさ,拡大の速度,初期に拡大しておく箇所);
}
</script>

を設定します。onload記法は変更したほうが良いかもしれませんね。

実際に適応したサンプルは以下になります。

<script type="text/javascript">
window.onload = function(){
	slideMenu.build('sm',200,1,100,1);
}
</script>

使ってみた感じでは、li要素にmarginやborderを指定するとカラムが落ちるので、li要素の中にブロックレベル要素を入れてそこに装飾を加えるのがよいでしょう。

あと水平方向のアコーディオンの場合、文字が入ってるコンテンツはあまり向かない気がします。配布元のサンプルのように画像を利用するのがよいかなと思いました。

JavaScriptのソースがすっきりしていますので、JavaScriptを勉強中の方には参考になるかも。