BizIdea京东商城商品导航菜单标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>显示多级子栏目列表测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://www.ks-pe.com/Skin/kspe/navtree.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.ks-pe.com/JS/jquery.pack.js"></script>
<script type="text/javascript">
var isIE6 = (navigator.userAgent.toLowerCase().indexOf("msie 6") != -1);

jQuery(document).ready(function() {
if(isIE6){
jQuery(".extMenu").hover(function(){
jQuery(this).addClass("hover");
},function(){
jQuery(this).removeClass("hover");
});
}
});

</script>

</head>

<body>
<h4>京东菜单样式</h4>
<div class="navTree">
<h3><a href="/Category_10/Index.aspx" title="测试">测试</a></h3>
<ul>
<li><a href="http://zhidao.baidu.com/" title="百度知道">百度知道</a></li>
<li class="extMenu"><a href="/Category_30/Index.aspx" title="子节点A">子节点A</a><span>-</span><del>
<a href="/Category_46/Index.aspx" title="子节点A-Sub">子节点A-Sub</a>
</del>
<blockquote>
<dl>
<dd>
<a href="/Category_46/Index.aspx" title="子节点A-Sub">子节点A-Sub</a>
</dd>
</dl>
</blockquote>
</li>
<li class="extMenu"><a href="/Category_32/Index.aspx" title="子节点C">子节点C</a><span>-</span><del>
<a href="/Category_49/Index.aspx" title="子节点C的子节点">子节点C的子</a>
</del>
<blockquote>
<dl>
<dd>
<a href="/Category_49/Index.aspx" title="子节点C的子节点">子节点C的子</a>
</dd>
</dl>
</blockquote>
</li>
<li class="extMenu"><a href="/Category_33/Index.aspx" title="子节点D">子节点D</a><span>-</span><del>
<a href="/Category_50/Index.aspx" title="子节点D的子节点">子节点D的子</a>
</del>
<blockquote>
<dl>
<dd>
<a href="/Category_50/Index.aspx" title="子节点D的子节点">子节点D的子</a>
</dd>
</dl>
</blockquote>
</li>
<li class="extMenu"><a href="/Category_34/Index.aspx" title="子节点E">子节点E</a><span>-</span><del>
<a href="/Category_47/Index.aspx" title="子节点E的子节点">子节点E的子</a>
</del>
<blockquote>
<dl>
<dd>
<a href="/Category_47/Index.aspx" title="子节点E的子节点">子节点E的子</a>
</dd>
</dl>
</blockquote>
</li>
<li class="extMenu"><a href="/Category_35/Index.aspx" title="子节点F">子节点F</a><span>-</span><del>
<a href="/Category_48/Index.aspx" title="子节点F的子节点">子节点F的子</a>
</del>
<blockquote>
<dl>
<dd>
<a href="/Category_48/Index.aspx" title="子节点F的子节点">子节点F的子</a>
</dd>
</dl>
</blockquote>
</li>
<li class="extMenu"><a href="/Category_31/Index.aspx" title="子节点B">子节点B</a><span>-</span><del>
<a href="/Category_9/Index.aspx" title="测试页面">测试页面</a><a href="/Category_18/Index.aspx" title="测试单页B">测试单页B</a>
</del>
<blockquote>
<dl>
<dd>
<a href="/Category_9/Index.aspx" title="测试页面">测试页面</a><a href="/Category_18/Index.aspx" title="测试单页B">测试单页B</a><a href="/Category_23/Index.aspx" title="测试单页A">测试单页A</a><a href="/Category_36/Index.aspx" title="子节点B-Sub">子节点B-Sub</a>
</dd>
</dl>
</blockquote>
</li>
<li><a href="/Category_44/Index.aspx" title="编程标签测试">编程标签测试</a></li>
<li><a href="/Category_55/Index.aspx" title="标签参数测试">标签参数测试</a></li>
<li><a href="/Category_72/Index.aspx" title="很长很长很长很长的节点测试">很长很长很长</a></li>
<li><a href="/Category_74/Index.aspx" title="js字段">js字段</a></li>
<li><a href="/Category_75/Index.aspx" title="模板测试">模板测试</a></li>
</ul>

</div>

</body>
</html>

本文来源:http://www.ks-pe.com/article/66.html

有话要说