いつもお世話になっております

カテゴリーブロックについてです


例のように表示させたいです
どのようなデザイン工夫をしたらよいでしょうか？

javascriptを使っていそうなのですが
他に綺麗に見せる技法などあれば教えていただけたら幸いです

ttp://www.1-s.jp/

このサイトもECCUBEです

CSSでlevelごとに背景色を変えてみました
カテゴリー別に横幅の他に縦にも背景色がついてしまい
上手くいきません

　
　＠親カテ＠＠
　＠　子カテ
　＠　　孫カテ

こんな感じで＠の部分が背景が変わってしまいます
分かりにくくてすいません・・・

<SCRIPT language="JavaScript">
<!--
// ツリーメニュー
flag = false;
function treeMenu(tName) {
tMenu = document.all[tName].style;
if(tMenu.display == 'none') tMenu.display = "block";
else tMenu.display = "none";
}
//-->
</SCRIPT>


<A href="java script:treeMenu('treeMenu1')">■</a>
<a href="ID1">カテゴリ1</a><br>
<DIV id="treeMenu1" style="display:none">
┣ <A href="ID3">子カテ1</A><BR>
┣ <A href="ID4">子カテ2</A><BR>
└ <A href="ID5">子カテ3</A><BR>
</DIV>
A href="java script:treeMenu('treeMenu2')">■</a>
<a href="ID2">親カテ2</a><br>
<DIV id="treeMenu2" style="display:none">
┣ <A href="ID6"></A><BR>
┣ <A href="ID7"></A><BR>
┣ <A href="・・・・
</DIV>

こんな形で実装できるとは思いますが良い
カテゴリ機能が元々ついているので
これを新しくカテゴリを追加したらHTMLを書かずに
自動で割り振ってもらうようにソースってかけますか？
もし出来るなら挑戦してみたいです

こんにちは。
すみません、ちょっと、何をおっしゃりたいのか、よく分からなくて、想像ベースなんですが･･･

え〜と、サンプルで出されていたサイトの左メニューのように、カテゴリの階層によって、その階層の段階が分かるように、デザイン分けしたい＆管理画面からカテゴリがどんどん追加されていった場合にも、その都度手動でカテゴリブロックのソースを直すような仕様ではなく、メニューのデザインを維持しながらメニュー（＝カテゴリ）を追加できるようにしたい、ということでしょうか？

↓できます。

現状のデフォルトのソースだと、第一階層の<UL><li>の中に第二階層の<ul>が入れ子になって入っていますので、CSSは、第一階層のソースを引き継ぐものが出てきます。（背景や文字の大きさなど）

ですので、まずは、ここの入れ子構造をやりたいデザインにあわせてバラしてから、それぞれの<ul>または<li>に個別にCSSを設定すればいいと思います。

具体的には、カテゴリのレベルが、level1、level2という形で取得できますので、これをCSSのクラスに設定して、classはlevel1なら●●、level2なら●●、というかたちでソースを組んでいってはどうでしょう。
私はこの方法で、実装できました。


JSは使わなくても大丈夫だと思います。
書かれていた<div>を使用したソースベースでももちろんできると思います。

されたいことが、上述の私の理解であっているかどうかがわからないので、そのまま使用できるか不明ですが、私の使用した参考ソースを記しておきます。
やったことは、第一階層のliにlevel1をクラスに指定したCSSを設定し、第二階層では、level2をクラスに指定したCSSを設定。
（他のサイトでは、似たようなことをするために<ul><li>の構造を少し変えたりしました。）

ちなみにうちは、カテゴリは、現状第二階層までしか使用していませんので、使われるのであれば、そのあたりは応用してみてください。

---------------------
<!--商品カテゴリーここから-->
<!-- <h3 class="category">商品カテゴリー</h3> -->
<div id="categoryarea">
<ul id="categorytree">
<!--{assign var=preLev value=1}-->
<!--{assign var=firstdone value=0}-->
<!--{section name=cnt loop=$arrTree}-->
<!--{* 表示フラグがTRUEなら表示 *}-->
<!--{if $arrTree[cnt].display == 1}-->
<!--{assign var=level value=`$arrTree[cnt].level`}-->
<!--{assign var=levdiff value=`$level-$preLev`}-->
<!--{if $levdiff > 0}--></li>
<li>
<ul><!--{elseif $levdiff == 0 && $firstdone == 1}--></li>
<!--{elseif $levdiff < 0}--><!--{section name=d loop=`$levdiff*-1`}--></li>
</ul><!--{/section}-->
</li>
<!--{/if}-->
<li class="level<!--{$level}--> cat<!--{$arrTree[cnt].category_id}--><!--{if in_array($arrTree[cnt].category_id, $tpl_category_id) }--> cat<!--{$arrTree[cnt].category_id}-->-onmark<!--{/if}-->"><a href="<!--{$smarty.const.URL_DIR}-->products/list.php?category_id=<!--{$arrTree[cnt].category_id}-->"<!--{if in_array($arrTree[cnt].category_id, $tpl_category_id) }--> class="onlink"<!--{/if}-->><!--{$arrTree[cnt].category_name|escape}-->(<!--{$arrTree[cnt].product_count|default:0}-->)</a><!--{if $firstdone == 0}--><!--{assign var=firstdone value=1}--><!--{/if}-->
<!--{assign var=preLev value=`$level`}-->
<!--{/if}-->
<!--{* セクションの最後に閉じタグを追加 *}-->
<!--{if $smarty.section.cnt.last}-->
<!--{if $preLev-1 > 0 }-->
<!--{section name=d loop=`$preLev-1`}--></li>
</ul>
<!--{/section}--></li>
<!--{else}--></li>
<!--{/if}-->
<!--{/if}-->
<!--{/section}-->
</ul>
</div>
<!--商品カテゴリーここまで-->
---------------------
上記で書き出されたHTMLソースはこんな感じです。
---------------------
<!--商品カテゴリーここから-->
<!-- <h3 class="category">商品カテゴリー</h3> -->
<div id="categoryarea">
<ul id="categorytree">
<li class="level1 cat1"><a href="/products/●●">●●(00)</a></li>
<li class="level1 cat2"><a href="/products/●●">●●(00)</a></li>
<li class="level1 cat3"><a href="/products/●●">●●(00)</a></li>
<li>
<ul><li class="level2 cat11 cat11-onmark"><a href="/products/●●" class="onlink">●●(00)</a></li>
<li class="level2 cat12"><a href="/products/●●">●●(00)</a></li>
<li class="level2 cat13"><a href="/products/●●">●●(00)</a></li>
</ul></li>
<li class="level1 cat4"><a href="/products/●●">●●(00)</a></li>
<li class="level1 cat5"><a href="/products/●●">●●(00)</a></li>
</ul>
</div>
<!--商品カテゴリーここまで-->
---------------------

よかったら試してみてください。

ご丁寧に有難う御座います
分かりにくくて申し訳ありません

EC-CUBEバージョン 2.1.2
PHPバージョン PHP 5.2.6
DBバージョン PostgreSQL 7.4.18

このVerだとカテゴリを多段階層まで展開してくれるのですが

+カテゴリ1
　└子カテゴリ

現在はカテゴリ1をクリックするとカテゴリ1商品一覧が開き
子カテゴリが展開されて
カテゴリブロックに表示されるようになってますが

これを+を押すとカテゴリ1商品一覧にいかず
展開してくれるようなスタイルです

この動きがjavascriptのツリーメニューで作れるようなので
（CSSでも出来るのかな？）

それに現状の商品登録をすると自動でカテゴリブロックに表示される方法を維持する方法は無いものかと考えていたのですが

今後の拡張としては大変ですが
ツリーメニューはHTMLにて書き出して作成してしまいました
面倒ですがこれだと表示したくないカテゴリを作れて
商品オプションで商品詳細に非表示カテゴリを同時購入などといったオプションにすることが出来ますがこれまたものすごい手間ですorz
これを上手く出来たらなぁと思ってたんです


丁寧なご説明有難う御座いました
また、このソースだとカテゴリの商品数が表示されてましたので
実装したい方は上記ソースのコピーで手軽にいけますね

ははぁ。なるほどですね。

じゃあ、あまりお役に立たなかったですね。
がんばってくださいね！