简明现代魔法 -> web设计理念 -> 仿京东的左侧商品分类设计

仿京东的左侧商品分类设计

2010-11-24

在网店中经常使用到的设计,很方便用户找到自己需要产品信息。其实不单单是网店,很多地方都能使用,比如博客园也使用了这种效果来将技术文章分类,下面的设计参考京东,仅作参考。

程序演示

 

下面是HTML部分:

				<!-- {foreach from=$widget_data item=category name=fe_gcate} -->
                <dl>
                	<div style="display: none;" id="EFF_div_{$category.id}" class="pop_wrap">
              			<div class="pop">
                        	<!-- {foreach from=$category.children item=child} -->
							<span><a href="index.php?app=search&cate_id={$child.id}">{$child.value|escape}</a></span>							<!-- {/foreach} -->
						</div>
            		</div>
                    
					<dt id="EFF_dt_{$category.id}">
						<a href="index.php?app=search&cate_id={$category.id}">{$category.value|escape}</a>
					</dt>
					<dd class="noDis" id="EFF_dd_{$category.id}">
					<!-- {foreach from=$category.children item=child} -->
					<span><a href="index.php?app=search&cate_id={$child.id}">{$child.value|escape}</a></span>
					<!-- {/foreach} -->
					</dd>
				</dl>
				<!-- {/foreach} -->

JavaScript部分:

function showSubCategory()
{
	$("#AllSort dt").mouseover(function(){
		var newDiv = document.getElementById("EFF_div_"+this.id.substr(7));
		this.className="curr";
		if (newDiv)
		{
			newDiv.style.display="block";
			return;
		}
		else
		{
			//var CLASS_NAME=($.browser.msie?($.browser.version>"7.0")?"class":"className":"class");
			var CLASS_NAME=($.browser.msie)?"className":"class";
			var newDiv_wrap=document.createElement("div");
			newDiv_wrap.setAttribute(CLASS_NAME,"pop_wrap");
			newDiv_wrap.setAttribute("id","EFF_div_"+this.id.substr(7))
			var newDiv=document.createElement("div");
			newDiv.setAttribute(CLASS_NAME,"pop");
			newDiv_wrap.appendChild(newDiv);
			newDiv.innerHTML=this.nextSibling.innerHTML;
			this.parentNode.insertBefore(newDiv_wrap,this);	
			newDiv_wrap.style.display="block";
		}
		//test/		
		$(".pop_wrap").mouseover(function(){
			$(this).css({"display":"block"});
			this.nextSibling.className="curr";
		}).bind("mouseleave",function(){
			$(this).css({"display":"none"});
			this.nextSibling.className="";
		})
		//test end/
	}).bind("mouseleave",function(){
		this.className=(this.nextSibling.className=="Dis")?"curr":"";
		$(".pop_wrap").css({"display":"none"});
	});	
}
showSubCategory();
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们