アコーディオン型のメニューを作成する

a-blog cmsでは、アコーディオン型のメニュー表示にする設定が標準で実装されています。（v1.3.0より）

サンプル）

---

メニューヘッダ1

ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。

メニューヘッダ2

ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。

メニューヘッダ3

ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。

<dl class="js-accordion">
<dt><a href="#">メニューヘッダ1</a></dt>
<dd>ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。</dd>
<dt><a href="#">メニューヘッダ2</a></dt>
<dd>ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。</dd>
<dt><a href="#">メニューヘッダ3</a></dt>
<dd>ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。</dd>
</dl>

---

アコーディオン型のメニューを作成する

1. 設定の編集

この機能の設定は、/js/acms/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みのJavaScriptの設定を編集する」を参照してください。

    //-----------
    // accordion
    accordionMark   : '.js-accordion',
    accordionConfig :
    {
        active      : null,
        animated    : 'slide', // ( 'slide' | 'fade' | '' )
        autoHeight  : false,
        collapsible : true
    },
    accordionArray  : [
    //    {
    //        'mark'    : '',
    //        'config'  : {}
    //    }
    ],

accordionMark	ここで指定したセレクタがアコーディオン表示になります。
accordionConfig	アコーディオンのオプション設定です。 active：ここで指定されたクラスを持つ要素内のメニューヘッダ（初期値：a要素）は、初期表示時に展開された状態になります。「null」にすると一番上のメニューが展開されます。 animated：個々のメニューを展開したり閉じたりするときのアニメーション表示の指定です。（slide：スライドして表示 / fade：フェードしながら表示） autoHeight：メニューの展開後の高さの設定です。（true：展開後の全てのメニューの高さが最大の高さに揃えられる / false：内容に応じた高さにする） collapsible：メニューの折りたたみの設定です。（true：全てのメニューが折りたたみ可能 / false：いずれか1つのメニューが必ず展開される）
accordionArray	配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

2. HTMLとCSSの編集

HTML

指定したクラスをHTMLに記述します。

例）accordionMarkで「.js-accordion」と指定した場合

---

<dl class="js-accordion">
<dt><a href="#">メニューヘッダ1</a></dt>
<dd>ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。</dd>
<dt><a href="#">メニューヘッダ2</a></dt>
<dd>ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。</dd>
<dt><a href="#">メニューヘッダ3</a></dt>
<dd>ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。</dd>
</dl>

CSS

必要に応じて、JavaScriptで指定したそれぞれのクラスにスタイルを指定します。

例）

.ui-accordion .ui-accordion-header {
  cursor:pointer;
  margin-top:1px;
  position:relative;
}
.ui-corner-all {
  -moz-border-radius:4px 4px 4px 4px;
}

---