[JS]スムーズなアニメーションで開閉するアコーディオンのスクリプト -Accordion Image Menu

画像を使って、スムーズなアニメーションで開閉するアコーディオンメニューを実装するjQueryのプラグインを紹介します。

jQuery – Accordion Image Menu Plugin
デモ

[ad#ad-2]

まずは、デモからご紹介。

開閉するパネルは、予め開いておくパネルを指定することが可能です。

デモ：openItem, easeOutQuint

アコーディオンは水平タイプだけでなく、垂直タイプにも対応しています。

デモ：vertical, easeOutBack

[ad#ad-2]

Accordion Image Menuの実装

HTML

各パネルはリスト要素で実装されています。

<ul id='menu'>
   <li><a href='link1'><span>title 1</span><img src='image1.jpg' /></a></li>
   <li><a href='link2'><span>title 2</span><img src='image2.jpg/></a></li>
   <li><a href='link3'><span>title 3</span><img src='image3.jpg' /></a></li>
   <li><a href='link4'><span>title 4</span><img src='image4.jpg' /></a></li>
   <li><a href='link5'><span>title 5</span><img src='image5.jpg' /></a></li>
</ul>

外部スクリプト

下記のファイルを外部ファイルとして、記述します。

script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/jquery-ui.js"></script>
<script type="text/javascript" src="path-to-file/accordionImageMenu.js"></script>

CSS

スタイルシートは外部ファイルとして、まとめられています。

<link rel="stylesheet" href="path-to-file/accordionImageMenu.css" type="text/css" />

JavaScript

オプション無しの場合の記述例です。

<script type="text/javascript">
$(document).ready(function() {
	$('#menu').AccordionImageMenu();
    });
</script>

スクリプトのオプション

スクリプトのオプションでは、アコーディオンの水平・垂直、メニューの幅・高さ、エフェクトの種類、デフォルト時に開いているパネル、フェードの有無などを調整できます。