EC-CUBE3 カテゴリをサイドに移動した時に、サブカテゴリを表示したい

ホームページ制作

あれ、サイドに移したらサブカテゴリが見れないぞ

EC-CUBE3になって、デフォルトでは1カラムのデザインになりました。

「サイドにメニューがほしいなぁ」と、レイアウト編集から色々ブロックを移したところ、
「カテゴリのメニューが展開しなくなって、サブカテゴリが見れない!」とのこと。

EC-CUBE3 カテゴリをサイドに移動した時に、サブカテゴリを表示されない
確かにメインカテゴリのみで、サブカテゴリが表示されません。
このままでは、サブカテゴリにたどり着くのが難しい!
(検索窓や商品詳細の関連カテゴリからたどれますが、お手軽ではないですよね)

何とかサブカテゴリを表示できるようにしたい、ということで
サブカテゴリを表示させるように、少しカスタマイズしてみました。

出来るだけお手軽に対応してみよう

常に展開される状態になりますが、
見た目上も整っており、何よりも簡単に対応ができるので、今回はCSSを編集して対応してみることにしました。

CSSを使って非表示にしているため、
その箇所を削除することで、サブカテゴリが表示されるようになります。
なんと1行消すだけ!

/html/template/default/css/style.cssの1105行目あたりにある下記のコード、
最低限「display: none;」を消せば、カテゴリエリアが常に展開する状態になります。
(下記ではコメントアウトしていますが、削除でもコメントアウトでも大丈夫です)

.category-nav ul {
    /*display: none;*/
}

サブカテゴリが表示できました

EC-CUBE3 カテゴリをサイドに移動した時に、サブカテゴリを表示してみた
そのままでも、ちゃんとインデントがついて、
カテゴリの関連が分かりやすくなっていますので、
あまりにもカテゴリの数が多い、といったことでなければ必要十分です。
これでお客様の移動もスムーズに行えるようになりました。