カテゴリが非常に多いので下記サイトを参考にカテゴリブロックのプルダウン化を試みました。

http://daihachi.sub.jp/archives/1286

プルダウン化はうまくいったのですが、1階層目からのプルダウンスタートになってしまっていて、当サイトでは少しお客様に伝わりづらくなってしまいます（現在3階層目まで常に表示）。

これを常に3階層目まで表示して4階層目以降だけプルダウン化を行いたいと思い調べてみたのですが、なかなか該当するサイトなどがなくこちらに質問させていただきました。

また皆様のお力を借りたいと思い書き込みをさせてもらいました、どうかご教授をお願いします。

EC-CUBE 2.12.6
Apache 2.4.7
php 5.1.6
MySQL 5.0.95

@kirin さん

こちらはどういった動作をさせる予定ですか？
（アニメーションなど必要？）
現在3階層目まで表示されていて、4階層目以降をプルダウンさせるのであれば、ライブラリを使用しなくてもEC-CUBEデフォルトで読み込んでいるjQueryで実装できそうですが。

slideToggle()を利用して表示してみては如何でしょう？

----------------
無料で学べるEC-CUBEノウハウ - EC-CUBEの学校
アラタナ

ご回答ありがとうございます。

希望動作なんですが。
現在、4階層目まで表示すると非常に長くなるため3階層目表示で止めています。
しかし、カテゴリ3階層目をクリックするとページの先頭へリンクするためお客様には4階層目展開されていることに気づいていただけない状態です。
これを打開するためプルダウン化にチャレンジすることにしました。

アニメーションの必要性なんですが、特にこだわりはありません。知識の乏しい私でもわかりやすく解説しているサイトがありましたので挑戦してみました。

「slideToggle()を利用して表示してみては如何でしょう？」
との事なんですが、私なりに実装方法を調べてみましたが知識が乏しいためわかりませんでした。
具体的にどのような記述をすればいいのでしょうか？ご教授をお願いします。

恐縮ではございますが、よろしくお願いします。

@kirin さん

カテゴリ4階層組なので、カテゴリブロックのHTML上は以下の構成になるかと思います。


<ul>
<li class="level1">
<p>カテゴリ1階層目</p>
<ul>
<li class="level2">
<p>カテゴリ2階層目</p>
<ul>
<li class="level3">
<p>カテゴリ3階層目</p>
<ul>
<li class="level4">
<p>カテゴリ4階層目</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

それぞれにclass="levelxx" とレベルごとにClass名が表示されています。
カテゴリ3階層目をマウスオーバーした時に、カテゴリ4階層目の表示を行うように
class="level3"をトリガーにその子要素をslideToggle()で展開させれば可能です。

----------------
無料で学べるEC-CUBEノウハウ - EC-CUBEの学校
アラタナ

ご回答、本当に感謝しています。

私では少しわかりづらいのでもう少し質問させていただきます。
現在、以下のように2階層目まで画像表示で運用させてもらってます。

<script type="text/javascript">//<![CDATA[
$(function(){
$('#category_area li.level4:last').css('border-bottom', 'none');
});
//]]></script>
<div class="block_outer">
<div id="category_area">
<div class="block_body">
<h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_bloc_category.gif" alt="商品カテゴリ" /></h2>
<!--{strip}-->
<ul id="categorytree">
<!--{assign var=preLev value=1}-->
<!--{assign var=firstdone value=0}-->
<!--{section name=cnt loop=$arrTree}-->
<!--{* 表示フラグがTRUEなら表示 *}-->
<!--{if $arrTree[cnt].display == 1|| $arrTree[cnt].level <=3}-->
<!--{assign var=level value=`$arrTree[cnt].level`}-->
<!--{assign var=levdiff value=`$level-$preLev`}-->
<!--{if $levdiff > 0}-->
<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}--><!--{if in_array($arrTree[cnt].category_id, $tpl_category_id)}--> onmark<!--{/if}-->">
<p>
<!--{if $level < 3}-->
<a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$arrTree[cnt].category_id}-->"<!--{if in_array($arrTree[cnt].category_id, $tpl_category_id)}--> class="onlink"<!--{/if}-->><img src="<!--{$TPL_URLPATH}-->img/category/<!--{$arrTree[cnt].category_id}-->.gif" alt="<!--{$arrTree[cnt].category_name|h}-->" /></a>
<!--{else}-->
<a href="<!--{$smarty.const.ROOT_URLPATH}-->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|h}-->(<!--{$arrTree[cnt].product_count|default:0}-->)</a>
<!--{/if}-->
</p>
<!--{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>
<!--{/strip}-->
</div>
</div>
</div>


これを私なりに解釈し、以下のように書き換えてみました。

<script type="text/javascript">//<![CDATA[
$(function(){
$('#category_area li.level4:last').css('border-bottom', 'none');
});
//]]></script>

<div class="block_outer">
<div id="category_area">
<div class="block_body">
<h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_bloc_category.gif" alt="商品カテゴリ" /></h2>
<!--{strip}-->
<ul id="categorytree">
<!--{assign var=preLev value=1}-->
<!--{assign var=firstdone value=0}-->
<!--{section name=cnt loop=$arrTree}-->
<!--{* 表示フラグがTRUEなら表示 *}-->
<!--{if $arrTree[cnt].display == 1|| $arrTree[cnt].level <=3}-->
<!--{assign var=level value=`$arrTree[cnt].level`}-->
<!--{assign var=levdiff value=`$level-$preLev`}-->
<!--{if $levdiff > 0}-->
<ul>
<!--{elseif $levdiff == 0 && $firstdone == 1}-->
</li>
<!--{elseif $levdiff < 0}-->
<!--{section name=d loop=`$levdiff*-1`}-->
</li>
</ul>
<!--{/section}-->
</li>
<!--{/if}-->
<li class="level1">
<p><a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$arrTree[cnt].category_id}-->"<!--{if in_array($arrTree[cnt].category_id, $tpl_category_id)}--> class="onlink"<!--{/if}-->><img src="<!--{$TPL_URLPATH}-->img/category/<!--{$arrTree[cnt].category_id}-->.gif" alt="<!--{$arrTree[cnt].category_name|h}-->" /></a></p></li>
<li class="level2">
<p><a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$arrTree[cnt].category_id}-->"<!--{if in_array($arrTree[cnt].category_id, $tpl_category_id)}--> class="onlink"<!--{/if}-->><img src="<!--{$TPL_URLPATH}-->img/category/<!--{$arrTree[cnt].category_id}-->.gif" alt="<!--{$arrTree[cnt].category_name|h}-->" /></a></p></li>
<li class="level3">
<p><a href="<!--{$smarty.const.ROOT_URLPATH}-->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|h}-->(<!--{$arrTree[cnt].product_count|default:0}-->)</a></p></li>
<li class="level4">
<p><a href="<!--{$smarty.const.ROOT_URLPATH}-->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|h}-->(<!--{$arrTree[cnt].product_count|default:0}-->)</a></p></li>
<!--{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>
<!--{/strip}-->
</div>
</div>
</div>


「なんだこれは!?」という記述なら是非ご指摘ください。

引用：

との事なんですが、どこにどのような記述をしていいのかわかりませんでした、ヒントを生かせず申し訳ありません。

また、私なりの解釈での記述に誤りがあるとご指摘お願いします。

恐縮ではございますが、よろしくお願いします。