Ecshop左侧商品分类导航特效

Ecshop的左侧导航在模板文件夹下的library的category_tree.lbi文件,因为echsop首页的子分类页都将调用该页面,为实现首页的侧导航特效,我们新件一文件,命名:category_tree_index.lbi,然后在首页调用即可。
Html代码如下:

<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}"?onmouseover="OversetTab({$cat.id},{$smarty.foreach.key.iteration})"?onMouseOut="OutsetTab({$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">&gt;</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>

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}

JS代码很简单如下:

&lt;script?type="text/javascript"&gt;
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?&lt;?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";
}
&lt;/script&gt;

——————————————-

版式、整理:@闫嵩达



本文链接:Ecshop左侧商品分类导航特效

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:@闫嵩达,谢谢!^^


发表评论

电子邮件地址不会被公开。 必填项已用*标注