テスト - アコーディオンメニュー

動作サンプル


JSが適用されたナビゲーション1

ボタンがimg要素/通常
  • かかかかかかか
  • ききききききき
  • くくくくくくく
  • けけけけけけけ
  • こここここここ

JSが適用されたナビゲーション2

ボタンがimg要素/デフォルトオープン
  • かかかかかかか
  • ききききききき
  • くくくくくくく
  • けけけけけけけ
  • こここここここ

JSが適用されたナビゲーション3

ボタンがimg要素/通常
  • かかかかかかか
  • ききききききき
  • くくくくくくく
  • けけけけけけけ
  • こここここここ
  • さささささささ
  • ししししししし
  • すすすすすすす
  • せせせせせせせ
  • そそそそそそそ

JSが適用されたナビゲーション4

ボタンがspan要素/通常
メニュー1
メニュー2
  • かかかかかかか
  • ききききききき
  • くくくくくくく
  • けけけけけけけ
  • こここここここ

JSが適用されたナビゲーション5

ボタンがspan要素/デフォルトオープン
メニュー1
メニュー2
  • かかかかかかか
  • ききききききき
  • くくくくくくく
  • けけけけけけけ
  • こここここここ

JSが適用されたナビゲーション6

テキスト/通常
メニュー1
メニュー2
  • かかかかかかか
  • ききききききき
  • くくくくくくく
  • けけけけけけけ
  • こここここここ
メニュー3
  • さささささささ
  • ししししししし
  • すすすすすすす
  • せせせせせせせ
  • そそそそそそそ

ナビ部分のhtmlソース

<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>メニュー2</span></dt><!-- ナビのボタンがテキスト(span要素)の場合 -->
<dd>
<ul>
<li>かかかかかかか</li>
<li>ききききききき</li>
<li>くくくくくくく</li>
<li>けけけけけけけ</li>
<li>こここここここ</li>
</ul>
</dd>
<dt>メニュー3</dt><!-- ナビのボタンがテキストの場合 -->
<dd>
<ul>
<li>かかかかかかか</li>
<li>ききききききき</li>
<li>くくくくくくく</li>
<li>けけけけけけけ</li>
<li>こここここここ</li>
</ul>
</dd>
</dl>

javascriptの設定

15~25行目付近の設定値に、本JSの対象とする要素のクラス名とスクロールのスピード、デフォルトオープン時に付加するクラス名などをセットする。

初期設定値のままで使用する場合は変更しなくも良い
//-----------------------------------------
// 設定値
//-----------------------------------------
conf : {
	targetClass : 'accordion',                      // 対象とするクラス名
	uniqueOpen : true,                              // 一度に開くメニューを1つにするか否か(true:1つ/false:複数)
	targetTag : 'dl',                               // 対象とする要素名
	buttonTag : 'dt',                               // ボタン部分の要素名
	menuTag : 'dd',                                 // メニュー部分の要素名
	defaultOpen : 'accordionOpen',                  // 初期オープン状態に指定するクラス名
	speed : 10,                                     // スクロールの速度
	slickness : 8,                                  // スクロールの滑らかさ
	rolloverClass : 'accordionOver',                // ロールオーバー時に付加されるクラス名
	activeClass : 'accordionActive',                // アクティブ時に付加されるクラス名

補足

ロールオーバー時、アクティブ時にはそれぞれ 「accordionOver」、「accordionActive」のクラス名が付加される(初期値時)。
それぞれのクラスに対してスタイルを設定すれば、ロールオーバーやアクティブ時の効果を表現できる。

.accordionActive{
background:#f6bfbc;
}
.accordionOver{
background:#e9dfe5;
}

また、ボタン部分がimg要素の場合は、ノーマル時、ロールオーバー時、アクティブ時で、
画像ファイル名をそれぞれ「~_n.拡張子」、「~_r.拡張子」、「~_a.拡張子」と切り替えているため、
それに合わせて画像ファイルを3つ用意することで、各効果を表現することができる。

本ページの場合は「btn_menu_n.gif」、「btn_menu_r.gif」、「btn_menu_a.gif」