Question

ecshop怎么修改商品分类导航

网上看到这个http://bbs.ecshop.com/thread-1122765-1-1.html，可是并不明白怎么调用，具体步骤是怎样的

Answer 1

　　我把步骤稍微给你梳理一下

　　第一步：在themes/我的模板名称/library中新建一个lbi文件叫category_tree_index.lbi
　　然后把下面代码复制粘贴到category_tree_index.lbi中；
　　<div id="category_tree">
<h3 id="category_h3"><span>商品导航</span></h3>
<ul class="i_sort_list">
<!--{foreach from=$categories item=cat name=key}-->
<li class="cate_li" id="li_i_item_{$cat.id}">
<h4 class="i_tit"><span class="i_wrap"><a href="{$cat.url}">{$cat.name|escape:html}</a><a class="i_bg"></a><span class="i_jian">></span></span></h4>
<div class="child_cont" id="div_i_item_{$cat.id}" style="display:none">
<!--{foreach from=$cat.cat_id item=child name=no}-->
<dl>
<dt>
<a href="{$child.url}" hidefocus="true">{$child.name|escape:html}</a>
</dt>
<dd class="i_row1">
<!--{foreach from=$child.cat_id item=children name=no}-->
<a href="{$children.url}" hidefocus="true">{$children.name|escape:html}</a>
<!--{/foreach}-->
</dd>
</dl>
<!--{/foreach}-->
</div>
</li>
<!--{/foreach}-->
</ul>
</div>
<script type="text/javascript">
function OversetTab(id,k){
document.getElementById("li_i_item_"+id+"").className = "cate_li i_item_status_on";
document.getElementById("div_i_item_"+id+"").style.display = "block";
if(document.getElementById("div_i_item_"+id+"").offsetHeight < k*38){
document.getElementById("div_i_item_"+id+"").style.margin = "-56px 0 0 206px";
}else{
document.getElementById("div_i_item_"+id+"").style.margin = "-"+k*38+"px 0 0 206px";
}
}
function OutsetTab(id){
document.getElementById("li_i_item_"+id+"").className = "cate_li";
document.getElementById("div_i_item_"+id+"").style.display = "none";
}
</script>

第二步：把css放到themes/我的模板名称/style.css里
#category_tree .i_sort_list{background:#fff;zoom:1}
#category_tree .i_sort_list .cate_li{zoom:1;vertical-align:top}
#category_tree .i_sort_list .cate_li .i_tit{height:38px;position:relative;font-size:14px;color:#973a36;font-weight:normal;margin:0 10px; font-weight:bold}
#category_tree .i_sort_list .cate_li .i_tit a{color:#76292f;}
#category_tree .i_sort_list .cate_li .i_tit .i_wrap{position:absolute;top:0;left:-10px;padding:10px 0 10px 0;width:208px;display:block;font-family:"SimSun";text-indent:10px;*zoom:1}
#category_tree .i_sort_list .cate_li .i_tit .i_wrap:hover{background:#fff;}
#category_tree .i_sort_list .cate_li .i_tit .i_jian{position:absolute;top:10px;right:10px;font-family:"SimSun";color:#b4b0ad}
#category_tree .i_sort_list .cate_li .child_cont{background:#fff;overflow:hidden;zoom:1;display:none;border:1px solid #e71d1d;position:absolute;margin-top:-76px;margin-left:206px;z-index:4}

#category_tree .i_sort_list .cate_li dl{padding:4px 0;zoom:1;line-height:22px}
#category_tree .i_sort_list .cate_li dl:after{content:'';display:block;clear:both;height:0;visibility:hidden}
#category_tree .i_sort_list .cate_li dt{float:left;width:90px;font:bold 12px/23px Arial;overflow:hidden}
#category_tree .i_sort_list .cate_li dt a:link,#category_tree .i_sort_list .cate_li dt a:visited{color:#cb1108}
#category_tree .i_sort_list .cate_li dt a:hover{color:#8d0700}
#category_tree .i_sort_list .cate_li dd{float:left;width:280px;white-space:normal;word-break:break-all;zoom:1;overflow:hidden;margin-top:-2px;}
#category_tree .i_sort_list .cate_li dd a{margin-left:4px;}
#category_tree .i_item_status_on .i_tit{z-index:6}
#category_tree .i_item_status_on .i_tit .i_wrap{background-color:#fff;text-decoration:none;top:-1px;left:-11px;border:1px solid #e71d1d;border-left:none;border-right:none;margin:0;width:184px;cursor:default}
#category_tree .i_item_status_on .i_tit .i_jian{display:none}
#category_tree .i_item_status_on .child_cont{display:block;width:400px}
#category_tree .i_nav_sort.i_status_on{height:auto}

第三步：比如在首页想调用这个弹出菜单，就直接用
<!-- #BeginLibraryItem "/library/category_tree_index.lbi" -->
<!-- #EndLibraryItem -->
来调用就可以了。

追问

第三步是说在index.php文件中添加这个代码就行吗，我加进去首页都报错了

追答

不是index.php中哦。
是在themes/我的模板名称/index.dwt里面相应的位置加的

Answer 2

网上看到这个http://bbs.ecshop.com/thread-1122765-1-1.html，可是并不明白怎么调用，具体步骤是怎样的他主要是实现鼠标移上去弹出子分类的功能，主要是效果上面的，而不是功能上面的。
你可以按他的步骤尝试一下修改，模板堂用了更简单的方法，不用js用css就可以实现这种效果，你可以了解下。
第一步：在themes/我的模板名称/library中新建一个lbi文件叫category_tree_index.lbi
然后把下面代码复制粘贴到category_tree_index.lbi中；
<div id="category_tree">
<h3 id="category_h3"><span>商品导航</span></h3>
<ul class="i_sort_list">
<!--{foreach from=$categories item=cat name=key}-->
<li class="cate_li" id="li_i_item_{$cat.id}">
<h4 class="i_tit"><span class="i_wrap"><a href="{$cat.url}">{$cat.name|escape:html}</a><a class="i_bg"></a><span class="i_jian">></span></span></h4>
<div class="child_cont" id="div_i_item_{$cat.id}" style="display:none">
<!--{foreach from=$cat.cat_id item=child name=no}-->
<dl>
<dt>
<a href="{$child.url}" hidefocus="true">{$child.name|escape:html}</a>
</dt>
<dd class="i_row1">
<!--{foreach from=$child.cat_id item=children name=no}-->
<a href="{$children.url}" hidefocus="true">{$children.name|escape:html}</a>
<!--{/foreach}-->
</dd>
</dl>
<!--{/foreach}-->
</div>
</li>
<!--{/foreach}-->
</ul>
</div>
<script type="text/javascript">
function OversetTab(id,k){
document.getElementById("li_i_item_"+id+"").className = "cate_li i_item_status_on";
document.getElementById("div_i_item_"+id+"").style.display = "block";
if(document.getElementById("div_i_item_"+id+"").offsetHeight < k*38){
document.getElementById("div_i_item_"+id+"").style.margin = "-56px 0 0 206px";
}else{
document.getElementById("div_i_item_"+id+"").style.margin = "-"+k*38+"px 0 0 206px";
}
}
function OutsetTab(id){
document.getElementById("li_i_item_"+id+"").className = "cate_li";
document.getElementById("div_i_item_"+id+"").style.display = "none";
}
</script>
第二步：把css放到themes/我的模板名称/style.css里

#category_tree .i_sort_list{background:#fff;zoom:1}
#category_tree .i_sort_list .cate_li{zoom:1;vertical-align:top}
#category_tree .i_sort_list .cate_li .i_tit{height:38px;position:relative;font-size:14px;color:#973a36;font-weight:normal;margin:0 10px; font-weight:bold}
#category_tree .i_sort_list .cate_li .i_tit a{color:#76292f;}
#category_tree .i_sort_list .cate_li .i_tit .i_wrap{position:absolute;top:0;left:-10px;padding:10px 0 10px 0;width:208px;display:block;font-family:"SimSun";text-indent:10px;*zoom:1}
#category_tree .i_sort_list .cate_li .i_tit .i_wrap:hover{background:#fff;}
#category_tree .i_sort_list .cate_li .i_tit .i_jian{position:absolute;top:10px;right:10px;font-family:"SimSun";color:#b4b0ad}
#category_tree .i_sort_list .cate_li .child_cont{background:#fff;overflow:hidden;zoom:1;display:none;border:1px solid #e71d1d;position:absolute;margin-top:-76px;margin-left:206px;z-index:4}
#category_tree .i_sort_list .cate_li dl{padding:4px 0;zoom:1;line-height:22px}

#category_tree .i_sort_list .cate_li dl:after{content:'';display:block;clear:both;height:0;visibility:hidden}
#category_tree .i_sort_list .cate_li dt{float:left;width:90px;font:bold 12px/23px Arial;overflow:hidden}
#category_tree .i_sort_list .cate_li dt a:link,#category_tree .i_sort_list .cate_li dt a:visited{color:#cb1108}
#category_tree .i_sort_list .cate_li dt a:hover{color:#8d0700}
#category_tree .i_sort_list .cate_li dd{float:left;width:280px;white-space:normal;word-break:break-all;zoom:1;overflow:hidden;margin-top:-2px;}
#category_tree .i_sort_list .cate_li dd a{margin-left:4px;}
#category_tree .i_item_status_on .i_tit{z-index:6}
#category_tree .i_item_status_on .i_tit .i_wrap{background-color:#fff;text-decoration:none;top:-1px;left:-11px;border:1px solid #e71d1d;border-left:none;border-right:none;margin:0;width:184px;cursor:default}
#category_tree .i_item_status_on .i_tit .i_jian{display:none}
#category_tree .i_item_status_on .child_cont{display:block;width:400px}
#category_tree .i_nav_sort.i_status_on{height:auto}
第三步：是在themes/我的模板名称/index.dwt里面相应的位置加进去首页
<!-- #BeginLibraryItem "/library/category_tree_index.lbi" -->
<!-- #EndLibraryItem -->
来调用就可以了。

Answer 3

他主要是实现鼠标移上去弹出子分类的功能，主要是效果上面的，而不是功能上面的。
你可以按他的步骤尝试一下修改，模板堂用了更简单的方法，不用js用css就可以实现这种效果，你可以了解下

追问

什么方法？？？具体的怎么做，我看不懂他的

追答

我看楼主也挺纠结的，给你整理一下模板堂某一个商业模板的分类弹出效果吧，哎

由于篇幅限制给你上传了附件，注意查收