JSが適用されたナビゲーション1
ボタンがimg要素／通常JSが適用されたナビゲーション1
ボタンがimg要素／通常JSが適用されたナビゲーション2
ボタンがimg要素／デフォルトオープンJSが適用されたナビゲーション3
ボタンがimg要素／通常JSが適用されたナビゲーション4
ボタンがspan要素／通常JSが適用されたナビゲーション5
ボタンがspan要素／デフォルトオープンJSが適用されたナビゲーション6
テキスト／通常JSが適用されたナビゲーション9
テキスト／通常
<dl class="accordion"><!-- dl要素に対象とするクラス名をつける -->
<dt><img src="./images/btn_menu_n.gif" alt="" /></dt><!-- ナビのボタンがimg要素の場合 -->
<dd class="accordionOpen"><!-- 初期オープン状態とするdd要素に、初期オープン用クラスをつける -->
<ul>
<li><a href="#">あああああああ</a></li>
<li><a href="#">いいいいいいい</a></li>
<li><a href="#">ううううううう</a></li>
<li><a href="#">えええええええ</a></li>
<li><a href="#">おおおおおおお</a></li>
</ul>
</dd>
<dt><span>メニュー２</span></dt><!-- ナビのボタンがテキスト（span要素）の場合 -->
<dd>
<ul>
<li>かかかかかかか</li>
<li>ききききききき</li>
<li>くくくくくくく</li>
<li>けけけけけけけ</li>
<li>こここここここ</li>
</ul>
</dd>
<dt>メニュー３</dt><!-- ナビのボタンがテキストの場合 -->
<dd>
<ul>
<li>かかかかかかか</li>
<li>ききききききき</li>
<li>くくくくくくく</li>
<li>けけけけけけけ</li>
<li>こここここここ</li>
</ul>
</dd>
</dl>
15～25行目付近の設定値に、本JSの対象とする要素のクラス名とスクロールのスピード、デフォルトオープン時に付加するクラス名などをセットする。
初期設定値のままで使用する場合は変更しなくも良い//-----------------------------------------
// 設定値
//-----------------------------------------
config : {
targetClass : 'accordion', // 対象とするクラス名
defaultOpen : 'accordionOpen', // 初期オープン状態に指定するクラス名
speed : 10, // スクロールの速度
slickness : 8, // スクロールの滑らかさ
activePrefix : '_a', // アクティブ時に画像に付加されるprefix
activeClass : 'accordionActive' // アクティブ時にdtに付加されるクラス名
},
アクティブ時には 「accordionActive」のクラス名が付加される（初期値時）。
該当クラスに対してスタイルを設定すれば、アクティブ時の効果を表現できる。
.accordionActive{
background:#f6bfbc;
}また、ボタン部分がimg要素の場合は、アクティブ時に画像ファイル名を「～_a.拡張子」と切り替えているため、
それに合わせて画像ファイルを用意することで、アクティブ時効果を表現することができる。