EC-CUBEのデザインを変更されている方も世の中には沢山いらっしゃると思いますが、
EC-CUBEには特徴の一つ、ブロックによるレイアウトの組み換えという機能があります。
ヘッダーやサイドバー、メインコンテンツやフッターにブロックと言われる機能単位の塊を
ドラッグアンドドロップするだけで、目的の位置に配置する事が出来る機能となります。
簡単に構造を変更出来る事から、利用されている方も多いと予想しているのですが、
EC-CUBE3でも勿論、こちらの機能は健在です。
ただ、早速、色々触っていて分かった事なのですが、
カテゴリーを一覧で表示するカテゴリーブロックをヘッダーエリア以外に配置すると、
子カテゴリーがドロップダウンで表示されない現象が起こりました。
これは、現時点で最新の3.0.13でも発生しています。
これでは、サイドメニューにカテゴリーを配置するようなデザインを採用した時に
子カテゴリを表示する事が出来ません。
原因は一体何なのか？FireFoxのFireBugやChromeのデベロッパーツールを利用して、
ドロップダウンの挙動を調査してみました。
結論から先に言いますと、ドロップダウンのアニメーションは、
Javascript等は利用せず、スタイルシートのみで
/html/template/テンプレート名/css/style.css内に:hover疑似クラスとtransitionを利用して定義されているのですが、
そのセレクタに「#header」が記述されており、id=”header”の要素内でしか反応しないように記述されていました。
style.css 3732行付近
#header .category-nav > li:hover > a {}
#header .category-nav > li:hover li:hover > a { background: rgba(204, 204, 204, 0.1)}
#header .category-nav > li:hover > ul > li {
overflow: visible;
height: 50px;
}
transitionの指定は、style.css 3722行付近に記述があります。
#header .category-nav li ul li {
float: left;
overflow: hidden;
width: 100%;
height: 0;
transition: .2s;
}
これは仕様なのでしょうか？？
因みにレスポンシブデザインによるスマートフォン用のデザインのメニューでも
第1階層のカテゴリしか表示されないようです。。。
上記ヘッダー内カテゴリメニュー用のスタイルシートの記述の下に
/* —– category_nav in side —- */
から始まる記述があります。
こちらに以下の記述を追記すると、サイドメニューでも子カテゴリが展開されるようになります。
ちょっと長いですが・・・
.side .category-nav .toggle {
display: none;
}
.side .category-nav li ul {
display: block;
}
.side .category-nav li {
position: relative;
display: inline-block;
width: 100%;
}
.side .category-nav > li > a {
padding: 0 1em;
height: 55px;
line-height: 55px;
border-bottom: none;
}
.side .category-nav li a {
display: block;
}
.side .category-nav li ul {
position: absolute;
z-index: 100;
top: 100%;
left: 0;
width: 100%;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.side .category-nav li ul li {
float: left;
overflow: hidden;
width: 100%;
height: 0;
transition: .2s;
}
.side .category-nav li ul li a {
text-align: left;
}
.side .category-nav > li:hover > a {}
.side .category-nav > li:hover li:hover > a { background: rgba(204, 204, 204, 0.1)}
.side .category-nav > li:hover > ul > li {
overflow: visible;
height: 50px;
}
.side .category-nav li ul li ul {
top: 0;
left: 100%;
}
.side .category-nav li:last-child ul li ul {
left: 100%;
width: 100%;
}
.side .category-nav li ul li ul:before {
position: absolute;
content: “>”;
top: 13px;
left: -15px;
width: 0;
height: 0;
}
.side .category-nav li:last-child ul li ul:before {
position: absolute;
content: “>”;
top: 13px;
left: -15px;
width: 0;
height: 0;
/*
content: “<“; top: 13px; left: 200%; margin-left: -15px; */ } .side .category-nav li ul li:hover > ul > li {
overflow: visible;
height: 50px;
}
.side .category-nav li ul li ul li a {}
.side .category-nav li:hover ul li ul li a:hover { background: rgba(204, 204, 204, 0.1)}
.side .category-nav ul > li > a,
.side .category-nav ul > li > ul > li > a,
.side .category-nav ul > li > ul > li > ul > li a {
padding-left: 10px;
}
他にもサイドバー以外にカテゴリブロックを配置する場合も
同じようにCSSを追記してください。
※配置する場所に合わせて、多少CSSの内容を調整する必要があると思います。
以上、それでは、カテゴリーをヘッダー以外の場所に配置したい際の
子カテゴリドロップダウンの表示の対応方法となります。
