<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>仿淘宝菜单</title>
<link rel="stylesheet" href="http://a.tbcdn.cn/??tbsp/tbsp.css,p/global/1.0/global-min.css,/apps/hesper/tmse/footer.css,p/market/2011/common_v2.css">
<script src="http://a.tbcdn.cn/??s/kissy/1.2.0/kissy-min.js,p/global/1.0/global-min.js,p/market/r/120507/market-min.js,p/market/2011/common_v2.js"></script>
<style>
body {
width: 990px;
margin: 45px auto;
}
.sm-cat-d1 {
width: 190px;
height: 290px;
position: relative;
z-index: 9999;
}
.sm-cat-d1 a:link, .sm-cat-d1 a:visited {
color: #666;
white-space: nowrap;
}
.sm-cat-d1 .cat-box {
border-width: 1px;
border-style: solid;
border-left: none;
border-right: none;
height: 288px;
overflow: hidden;
position: relative;
}
.sm-cat-d1 .cat-list {
border-width: 1px;
border-style: solid;
border-top: none;
border-bottom: none;
margin-top: -1px;
height: 289px;
}
.sm-cat-d1 .cat-group {
float: left;
border-top: 1px solid #F3F3F3;
padding: 10px 0 7px;
margin: 0 13px;
width: 162px;
position: relative;
z-index: 1;
_display: inline;
}
.sm-cat-d1 .cat-group h4 {
color: #333;
font-size: 14px;
font-weight: bold;
text-align: left;
line-height: 14px;
padding-bottom: 4px;
position: relative;
zoom: 1;
}
.sm-cat-d1 .cat-group h4 s {
background: url([img]http://img03.taobaocdn.com/tps/i3/T1eR6BXX4iXXctdLvr-4-7.png[/img]) no-repeat;
font-size: 0;
width: 4px;
height: 7px;
position: absolute;
top: 4px;
right: 0;
}
.sm-cat-d1 .cat-group h4 a:link, .sm-cat-d1 .cat-group h4 a:visited {
color: #333;
position: relative;
}
.sm-cat-d1 .cat-group textarea {
display: none;
}
.sm-cat-d1 .cat-group ul {
margin-right: -5px;
}
.sm-cat-d1 .cat-group li {
float: left;
margin-right: 5px;
text-align: left;
line-height: 22px;
overflow: hidden;
word-wrap: break-word;
break-word: break-all;
zoom: 1;
}
.sm-cat-d1 .cat-group-active {
border-width: 1px;
border-style: solid;
border-right: none;
padding-left: 13px;
padding-right: 13px;
margin: 0 -1px -1px -1px;
width: 163px;
z-index: 9999;
}
.sm-cat-d1 .cat-group-active h4 {
margin-right: 1px;
}
.sm-cat-d1 .cat-popup {
border-width: 1px;
border-style: solid;
position: absolute;
top: 0;
left: 189px;
z-index: -1;
visibility: hidden;
width: 360px;
padding: 5px 0;
overflow: hidden;
}
.sm-cat-d1 .cat-popup-expand {
width: 612px;
}
.sm-cat-d1 .cat-popup-active {
visibility: visible;
}
.sm-cat-d1 .tag-list {
border-right: 1px solid #EBEBEB;
width: 330px;
padding: 0 15px;
overflow: hidden;
float: left;
margin-top: -1px;
}
.sm-cat-d1 .tag-group {
border-top: 1px dotted #DDD;
overflow: hidden;
padding: 6px 0;
margin-top: -1px;
zoom: 1;
}
.sm-cat-d1 .tag-group h5 {
float: left;
width: 66px;
}
.sm-cat-d1 .tag-group ul {
overflow: hidden;
zoom: 1;
}
.sm-cat-d1 .tag-group li {
float: left;
margin-bottom: 4px;
}
.sm-cat-d1 .tag-group li b {
color: #DDD;
font-weight: normal;
}
.sm-cat-d1 .tag-group li a {
padding: 0 8px;
}
.sm-cat-d1 .hot-list {
border-left: 1px solid #EBEBEB;
width: 221px;
margin-left: -1px;
padding: 5px 15px 0;
overflow: hidden;
float: left;
}
.sm-cat-d1 .hot-shop {
margin-bottom: 15px;
}
.sm-cat-d1 .hot-shop h5 {
margin-bottom: 4px;
}
.sm-cat-d1 .hot-shop li {
padding-right: 18px;
float: left;
line-height: 24px;
}
.sm-cat-d1 .hot-brand h5 {
margin-bottom: 10px;
}
.sm-cat-d1 .hot-brand ul {
margin-right: -10px;
}
.sm-cat-d1 .hot-brand li {
float: left;
width: 67px;
height: 52px;
margin-right: 10px;
padding-bottom: 7px;
overflow: hidden;
}
.sm-cat-d1 .hot-brand a {
display: block;
overflow: hidden;
text-decoration: none;
}
.sm-cat-d1 .hot-brand a img {
background: #E8E8E8;
border: 1px solid #DDD;
display: block;
width: 65px;
height: 32px;
}
.sm-cat-d1 .hot-brand a span {
display: block;
text-align: center;
}
.sm-cat-d1 .hot-brand a:hover {
border-width: 1px;
border-style: solid;
zoom: 1;
}
.sm-cat-d1 .hot-brand a:hover img {
border: none;
}
.sm-cat-d1 .hot-brand a:hover span {
color: #FFF;
padding-top: 1px;
}
.sm-cat-d1 .cat-box, .sm-cat-d1 .cat-list { border-color: red; }
.sm-cat-d1 .cat-group a.highlight { color: red !important; }
.sm-cat-d1 .cat-group-active {
background: #EEE;
border-color: red;
border-right-color: red;
}
.sm-cat-d1 .cat-popup {
background: #EEE;
border-color: red;
}
.sm-cat-d1 .hot-brand a:hover {
background:;
border-color:;
}
</style>
</head>
<body>
<div class="J_Module">
<div class="tb-module sm-cat-d1">
<div class="cat-box J_CatBox">
<ul class="cat-list clearfix">
<li class="cat-group">
<h4><a href="http://www.taobao.com" target="_blank">夏季必备</a><s></s></h4>
<ul class="clearfix">
<li><a href="http://www.taobao.com" target="_blank" >防晒</a></li><li><a href="http://www.taobao.com" target="_blank" >晒后修复</a></li><li><a href="http://www.taobao.com" target="_blank" class="highlight">美白</a></li><li><a href="http://www.taobao.com" target="_blank" >防水彩妆</a></li> </ul>
<textarea>
<div class="clearfix">
<ul class="tag-list clearfix">
<li class="tag-group clearfix">
<h5>标签分组</h5>
<ul class="clearfix">
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
</ul>
</li>
<li class="tag-group clearfix">
<h5>标签分组</h5>
<ul class="clearfix">
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
</ul>
</li>
<li class="tag-group clearfix">
<h5>标签分组</h5>
<ul class="clearfix">
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
</ul>
</li>
</ul>
<ul class="hot-list">
<li class="hot-shop">
<h5>热门商家</h5>
<ul class="clearfix">
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
</ul>
</li>
<li class="hot-brand">
<h5>热门品牌</h5>
<ul class="clearfix">
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
</ul>
</li>
</ul>
</div>
</textarea>
</li>
<li class="cat-group">
<h4><a href="http://www.taobao.com" target="_blank">夏季必备</a><s></s></h4>
<ul class="clearfix">
<li><a href="http://www.taobao.com" target="_blank" >防晒</a></li><li><a href="http://www.taobao.com" target="_blank" >晒后修复</a></li><li><a href="http://www.taobao.com" target="_blank" class="highlight">美白</a></li><li><a href="http://www.taobao.com" target="_blank" >防水彩妆</a></li> </ul>
<textarea>
<div class="clearfix">
<ul class="tag-list clearfix">
<li class="tag-group clearfix">
<h5>标签分组</h5>
<ul class="clearfix">
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
</ul>
</li>
<li class="tag-group clearfix">
<h5>标签分组</h5>
<ul class="clearfix">
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
</ul>
</li>
<li class="tag-group clearfix">
<h5>标签分组</h5>
<ul class="clearfix">
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
</ul>
</li>
</ul>
<ul class="hot-list">
<li class="hot-shop">
<h5>热门商家</h5>
<ul class="clearfix">
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
</ul>
</li>
<li class="hot-brand">
<h5>热门品牌</h5>
<ul class="clearfix">
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
</ul>
</li>
</ul>
</div>
</textarea>
</li>
<li class="cat-group">
<h4><a href="http://www.taobao.com" target="_blank">夏季必备</a><s></s></h4>
<ul class="clearfix">
<li><a href="http://www.taobao.com" target="_blank" >防晒</a></li><li><a href="http://www.taobao.com" target="_blank" >晒后修复</a></li><li><a href="http://www.taobao.com" target="_blank" class="highlight">美白</a></li><li><a href="http://www.taobao.com" target="_blank" >防水彩妆</a></li> </ul>
<textarea>
<div class="clearfix">
<ul class="tag-list clearfix">
<li class="tag-group clearfix">
<h5>标签分组</h5>
<ul class="clearfix">
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
</ul>
</li>
<li class="tag-group clearfix">
<h5>标签分组</h5>
<ul class="clearfix">
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
</ul>
</li>
<li class="tag-group clearfix">
<h5>标签分组</h5>
<ul class="clearfix">
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
</ul>
</li>
</ul>
<ul class="hot-list">
<li class="hot-shop">
<h5>热门商家</h5>
<ul class="clearfix">
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
</ul>
</li>
<li class="hot-brand">
<h5>热门品牌</h5>
<ul class="clearfix">
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
</ul>
</li>
</ul>
</div>
</textarea>
</li>
<li class="cat-group">
<h4><a href="http://www.taobao.com" target="_blank">夏季必备</a><s></s></h4>
<ul class="clearfix">
<li><a href="http://www.taobao.com" target="_blank" >防晒</a></li><li><a href="http://www.taobao.com" target="_blank" >晒后修复</a></li><li><a href="http://www.taobao.com" target="_blank" class="highlight">美白</a></li><li><a href="http://www.taobao.com" target="_blank" >防水彩妆</a></li> </ul>
<textarea>
<div class="clearfix">
<ul class="tag-list clearfix">
<li class="tag-group clearfix">
<h5>标签分组</h5>
<ul class="clearfix">
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
</ul>
</li>
<li class="tag-group clearfix">
<h5>标签分组</h5>
<ul class="clearfix">
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
</ul>
</li>
<li class="tag-group clearfix">
<h5>标签分组</h5>
<ul class="clearfix">
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
</ul>
</li>
</ul>
<ul class="hot-list">
<li class="hot-shop">
<h5>热门商家</h5>
<ul class="clearfix">
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
</ul>
</li>
<li class="hot-brand">
<h5>热门品牌</h5>
<ul class="clearfix">
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
</ul>
</li>
</ul>
</div>
</textarea>
</li>
<li class="cat-group">
<h4><a href="http://www.taobao.com" target="_blank">夏季必备</a><s></s></h4>
<ul class="clearfix">
<li><a href="http://www.taobao.com" target="_blank" >防晒</a></li><li><a href="http://www.taobao.com" target="_blank" >晒后修复</a></li><li><a href="http://www.taobao.com" target="_blank" class="highlight">美白</a></li><li><a href="http://www.taobao.com" target="_blank" >防水彩妆</a></li> </ul>
<textarea>
<div class="clearfix">
<ul class="tag-list clearfix">
<li class="tag-group clearfix">
<h5>标签分组</h5>
<ul class="clearfix">
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
</ul>
</li>
<li class="tag-group clearfix">
<h5>标签分组</h5>
<ul class="clearfix">
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
</ul>
</li>
<li class="tag-group clearfix">
<h5>标签分组</h5>
<ul class="clearfix">
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
<li><b>|</b><a href="http://www.taobao.com" targer="_blank">标签名称</a></li>
</ul>
</li>
</ul>
<ul class="hot-list">
<li class="hot-shop">
<h5>热门商家</h5>
<ul class="clearfix">
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
<li><a href="http://www.taobao.com" target="_blank">关键字</a></li>
</ul>
</li>
<li class="hot-brand">
<h5>热门品牌</h5>
<ul class="clearfix">
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
<li><a href="http://www.taobao.com" target="_blank"><img src="http://img.f2e.taobao.net/img.png_65x32.jpg" alt=""><span>品牌名称</span></a></li>
</ul>
</li>
</ul>
</div>
</textarea>
</li>
</ul>
</div>
<div class="cat-popup J_CatPopup cat-popup-expand"></div>
</div>
</div>
<script>
KISSY.add('sm-cat-d1', function (S) {
/**
* 弹出菜单构造函数
* @param {KISSY Node} container 弹出菜单容器节点
* @constructor
*/
function Popup (container) {
var triggers = container.all('.cat-group'),
popup = container.one('.J_CatPopup');
this.container = container;
this._init(triggers, popup);
};
/**
* 构造函数原型扩展
* @prototype
*/
Popup.prototype = {
/**
* 显示弹出菜单
* @method show
* @param {KISSY Node} trigger 触发弹出的分组
* @param {KISSY Node} popup 弹出层节点
*/
show : function (trigger, popup) {
var self = this,
container = self.container,
offset = trigger.offset().top - container.offset().top;
//显示弹出层，并插入内容
popup.addClass('cat-popup-active');
popup.html(trigger.one('textarea').val());
//弹出层高度小于模块高度
if (popup.outerHeight() <= 290) {
var containerOffset = container.outerHeight() + container.offset().top,
popupOffset = popup.outerHeight() + trigger.offset().top;
if (containerOffset >= popupOffset) {
popup.css('top', offset);
} else {
popup.css('top', offset + containerOffset - popupOffset);
}
}
//弹出层高度大于模块高度
else {
popup.css('top', 0);
}
},
/**
* 初始化入口
* @method _init
* @param {KISSY Node} triggers 类目分组节点
* @param {KISSY Node} popup 弹出层节点
*/
_init : function (triggers, popup) {
var self = this,
trigger,
timer;
//类目分组悬停
triggers.on('mouseenter', function (e) {
if (timer) {
clearTimeout(timer);
trigger.removeClass('cat-group-active');
}
trigger = S.one(e.currentTarget);
trigger.addClass('cat-group-active');
self.show(trigger, popup);
});
//类目分组移开
triggers.on('mouseleave', function (e) {
trigger = S.one(e.currentTarget);
timer = setTimeout(function () {
trigger.removeClass('cat-group-active');
popup.removeClass('cat-popup-active');
}, 200);
});
//弹出菜单悬停
popup.on('mouseenter', function (e) {
if (timer) {
clearTimeout(timer);
}
trigger.addClass('cat-group-active');
});
//弹出菜单移开
popup.on('mouseleave', function (e) {
timer = setTimeout(function () {
trigger.removeClass('cat-group-active');
popup.removeClass('cat-popup-active');
}, 200);
});
}
};
/**
* 模块构造函数
*/
function X (box, module) {
var container = S.one(module);
//实例化弹出菜单
new Popup(container);
}
S.dpl = S.dpl || {};
return S.dpl['sm-cat-d1'] = X;
}, {
attach: false,
requires: []
});
</script>
<script>
(function (S) {
S.use('sm-cat-d1', function (S) {
new S.dpl['sm-cat-d1'](S.one('.J_Module')[0], S.one('.' + 'sm-cat-d1')[0]);
});
})(KISSY);
</script>
<body>
</html>
扫一扫
907
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
