EC-CUBEレスポンシブWebデザイン:カテゴリブロック

カテゴリブロックの表示方法は、パラメータで設定できます。
CATEGORY_OPEN_PATTERN
1:アコーディオン
2:カテゴリ階層を折りたたむ
3:カテゴリ階層を折りたたまない

この記事のインデックス


1:アコーディオン

1. 親カテゴリーをクリックすると、子カテゴリーが展開されます。
2. 別の親カテゴリーをクリックすると、展開していた子カテゴリーが閉じます。
3. ページが遷移しても、展開した状態を保持します。開いているカテゴリは赤字で表示されるので、現在のカテゴリを確認することができます。
4. 親カテゴリの右側の矢印をクリックすると、カテゴリ内の商品がすべて表示されます。
5. メニューを開閉させるためには、子カテゴリーが存在し、なおかつ、そのカテゴリに商品が登録されている必要があります。

カテゴリの自動開閉と、展開した状態を維持したままページ遷移の2つを実現するために、jQuery ddaccordionを利用する。
▼jQuery ddaccordion
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm

2:カテゴリ階層を折りたたむ

初めは親カテゴリのみ表示。
親カテゴリをクリックすると、その商品一覧ページに移動し、カテゴリブロックは子カテゴリを表示します。


3:カテゴリ階層を折りたたまない

子カテゴリのすべてが展開された状態で表示されます。