ITOBEN STYLE > EC-CUBEレスポンシブWebデザイン:カテゴリブロック 2013年8月11日カテゴリー:未分類 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:カテゴリ階層を折りたたまない 子カテゴリのすべてが展開された状態で表示されます。
カテゴリブロックの表示方法は、パラメータで設定できます。
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:カテゴリ階層を折りたたまない
子カテゴリのすべてが展開された状態で表示されます。