以下是 jquery天猫商品分类导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery天猫商品分类导航</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.tmailsilder.v2.css" />
</head>
<body>
<div class="sw_main" id="options-examples">
<!-- TOP START -->
<div class="sw_top"></div>
<!-- Nav START -->
<div id="Z_TMAIL_SIDER_V2" class="sw_categorys_nav">
<div class="container">
<div class="allcategorys">
<h3 class="title-item-hd">
<a href="javascript:void(0);">
所有商品分类
<s class="icon"></s>
</a>
</h3>
<ul class="sublist">
<li>
<h3 class="mcate-item-hd">
<span>服饰内衣</span>
</h3>
<p class="mcate-item-bd">
<a href="#">女装</a>
<a href="#">男装</a>
<a href="#">内衣</a>
<a href="#">家居服</a>
<a href="#">配件</a>
<a href="#">羽绒</a>
<a href="#">呢大衣</a>
<a href="#">毛衣</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">
<span>鞋 箱包</span>
</h3>
<p class="mcate-item-bd">
<a href="#">女鞋</a>
<a href="#">男鞋</a>
<a href="#">箱包</a>
<a href="#">女包</a>
<a href="#">男包</a>
<a href="#">旅行箱</a>
<a href="#">钱包 </a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">
<span>珠宝、手表</span>
</h3>
<p class="mcate-item-bd">
<a href="#">饰品</a>
<a href="#">项链</a>
<a href="#">珠宝</a>
<a href="#">钻石</a>
<a href="#">手表</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">
<span>化妆品</span>
</h3>
<p class="mcate-item-bd">
<a href="#">护肤</a>
<a href="#">彩妆</a>
<a href="#">香水</a>
<a href="#">男士</a>
<a href="#">精油</a>
<a href="#">假发</a>
<a href="#">美体</a>
<a href="#">试用服务</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">
<span>运动 户外</span>
</h3>
<p class="mcate-item-bd">
<a href="#">运动鞋</a>
<a href="#">运动服</a>
<a href="#">运动用品</a>
<a href="#">户外</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">
<span>手机 数码</span>
</h3>
<p class="mcate-item-bd">
<a href="#">手机</a>
<a href="#">笔记本</a>
<a href="#">相机</a>
<a href="#">平板电脑</a>
<a href="#">配件</a>
<a href="#">电脑硬件</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">
<span>家用电器</span>
</h3>
<p class="mcate-item-bd">
<a href="#">大家电</a>
<a href="#">影音电器</a>
<a href="#">生活电器</a>
<a href="#">厨房电器</a>
<a href="#">健康护理</a>
<a href="#">剃须刀</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">
<span>家具 建材</span>
</h3>
<p class="mcate-item-bd">
<a href="#">家具</a>
<a href="#">卫浴</a>
<a href="#">地板</a>
<a href="#">灯具</a>
<a href="#">五金</a>
<a href="#">开关</a>
<a href="#">装修设计</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">
<span>家纺 居家</span>
</h3>
<p class="mcate-item-bd">
<a href="#">家纺</a>
<a href="#">磨毛套件</a>
<a href="#">羽绒被</a>
<a href="#">枕头</a>
<a href="#">软饰</a>
<a href="#">居家</a>
<a href="#">厨房</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">
<span>食品</span>
</h3>
<p class="mcate-item-bd">
<a href="#">零食</a>
<a href="#">进口</a>
<a href="#">茶叶</a>
<a href="#">冲饮</a>
<a href="#">酒水</a>
<a href="#">粮油</a>
<a href="#">干货</a>
<a href="#">生鲜</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">
<span>医药保健</span>
</h3>
<p class="mcate-item-bd">
<a href="#">保健</a>
<a href="#">滋补</a>
<a href="#">蛋白粉</a>
<a href="#">阿胶</a>
<a href="#">药品</a>
<a href="#">血压仪</a>
<a href="#">计生</a>
<a href="#">体检</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">
<span>母婴用品</span>
</h3>
<p class="mcate-item-bd">
<a href="#">玩具</a>
<a href="#">宝宝食品</a>
<a href="#">用品</a>
<a href="#">童装</a>
<a href="#">孕装</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">
<span>汽车 配件</span>
</h3>
<p class="mcate-item-bd">
<a href="#">新车</a>
<a href="#">座垫</a>
<a href="#">脚垫</a>
<a href="#">GPS</a>
<a href="#">车衣</a>
<a href="#">洗车机</a>
<a href="#">水枪</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd">
<span>文化 玩乐</span>
</h3>
<p class="mcate-item-bd">
<a href="#">电子凭证</a>
<a href="#">图书</a>
<a href="#">乐器</a>
<a href="#">旅游</a>
<a href="#">鲜花</a>
</p>
</li>
</ul>
</div>
</div>
</div>
<!-- Center START -->
<div style="overflow: hidden;">
<div class="sw_container">
<div style="height: 2000px;"></div>
</div>
</div>
</div>
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/jquery.tmailsilder.v2.js"></script>
<script type="text/javascript">
$('#Z_TMAIL_SIDER_V2').Z_TMAIL_SIDER_V2();
</script>
</body>
</html>
JS代码(DD_belatedPNG.js):
/*** DD_belatedPNG:Adds IE6 support:PNG images for CSS background-image and HTML <IMG/>.* Author:Drew Diller* Email:drew.diller@gmail.com* URL:http://www.dillerdesign.com/experiment/DD_belatedPNG/* Version:0.0.7a* Licensed under the MIT License:http://dillerdesign.com/experiment/DD_belatedPNG/#license** Example usage:* DD_belatedPNG.fix('.png_bg');
// argument is a CSS selector* DD_belatedPNG.fixPng( someNode );
// argument is an HTMLDomElement**/
/*PLEASE READ:Absolutely everything in this script is SILLY. I know this. IE's rendering of certain pixels doesn't make sense,so neither does this code!*/
var DD_belatedPNG ={
ns:'DD_belatedPNG',imgSize:{
}
,createVmlNameSpace:function(){
/* enable VML */
if (document.namespaces && !document.namespaces[this.ns]){
document.namespaces.add(this.ns,'urn:schemas-microsoft-com:vml');
}
if (window.attachEvent){
window.attachEvent('onbeforeunload',function(){
DD_belatedPNG = null;
}
);
}
}
,createVmlStyleSheet:function(){
/* style VML,enable behaviors */
/*Just in case lots of other developers have addedlots of other stylesheets using document.createStyleSheetand hit the 31-limit mark,let's not use that method!further reading:http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx*/
var style = document.createElement('style');
document.documentElement.firstChild.insertBefore(style,document.documentElement.firstChild.firstChild);
var styleSheet = style.styleSheet;
styleSheet.addRule(this.ns + '\\:*','{
behavior:url(#default#VML)}
');
styleSheet.addRule(this.ns + '\\:shape','position:absolute;
');
styleSheet.addRule('img.' + this.ns + '_sizeFinder','behavior:none;
border:none;
position:absolute;
z-index:-1;
top:-10000px;
visibility:hidden;
');
/* large negative top value for avoiding vertical scrollbars for large images,suggested by James O'Brien,http://www.thanatopsic.org/hendrik/ */
this.styleSheet = styleSheet;
}
,readPropertyChange:function(){
var el = event.srcElement;
if (event.propertyName.search('background') != -1 || event.propertyName.search('border') != -1){
DD_belatedPNG.applyVML(el);
}
if (event.propertyName == 'style.display'){
var display = (el.currentStyle.display == 'none') ? 'none':'block';
for (var v in el.vml){
el.vml[v].shape.style.display = display;
}
}
if (event.propertyName.search('filter') != -1){
DD_belatedPNG.vmlOpacity(el);
}
}
,vmlOpacity:function(el){
if (el.currentStyle.filter.search('lpha') != -1){
var trans = el.currentStyle.filter;
trans = parseInt(trans.substring(trans.lastIndexOf('=')+1,trans.lastIndexOf(')')),10)/100;
el.vml.color.shape.style.filter = el.currentStyle.filter;
/* complete guesswork */
el.vml.image.fill.opacity = trans;
/* complete guesswork */
}
}
,handlePseudoHover:function(el){
setTimeout(function(){
/* wouldn't work as intended without setTimeout */
DD_belatedPNG.applyVML(el);
}
,1);
}
,/*** This is the method to use in a document.* @param{
String}
selector - REQUIRED - a CSS selector,such as '#doc .container'**/
fix:function(selector){
var selectors = selector.split(',');
/* multiple selectors supported,no need for multiple calls to this anymore */
for (var i=0;
i<selectors.length;
i++){
this.styleSheet.addRule(selectors[i],'behavior:expression(DD_belatedPNG.fixPng(this))');
/* seems to execute the function without adding it to the stylesheet - interesting... */
}
}
,applyVML:function(el){
el.runtimeStyle.cssText = '';
this.vmlFill(el);
this.vmlOffsets(el);
this.vmlOpacity(el);
if (el.isImg){
this.copyImageBorders(el);
}
}
,attachHandlers:function(el){
var self = this;
var handlers ={
resize:'vmlOffsets',move:'vmlOffsets'}
;
if (el.nodeName == 'A'){
var moreForAs ={
mouseleave:'handlePseudoHover',mouseenter:'handlePseudoHover',focus:'handlePseudoHover',blur:'handlePseudoHover'}
;
for (var a in moreForAs){
handlers[a] = moreForAs[a];
}
}
for (var h in handlers){
el.attachEvent('on' + h,function(){
self[handlers[h]](el);
}
);
}
el.attachEvent('onpropertychange',this.readPropertyChange);
}
,giveLayout:function(el){
el.style.zoom = 1;
if (el.currentStyle.position == 'static'){
el.style.position = 'relative';
}
}
,copyImageBorders:function(el){
var styles ={
'borderStyle':true,'borderWidth':true,'borderColor':true}
;
for (var s in styles){
el.vml.color.shape.style[s] = el.currentStyle[s];
}
}
,vmlFill:function(el){
if (!el.currentStyle){
return;
}
else{
var elStyle = el.currentStyle;
}
for (var v in el.vml){
el.vml[v].shape.style.zIndex = elStyle.zIndex;
}
el.runtimeStyle.backgroundColor = '';
el.runtimeStyle.backgroundImage = '';
var noColor = (elStyle.backgroundColor == 'transparent');
var noImg = true;
if (elStyle.backgroundImage != 'none' || el.isImg){
if (!el.isImg){
el.vmlBg = elStyle.backgroundImage;
el.vmlBg = el.vmlBg.substr(5,el.vmlBg.lastIndexOf('")')-5);
}
else{
el.vmlBg = el.src;
}
var lib = this;
if (!lib.imgSize[el.vmlBg]){
/* determine size of loaded image */
var img = document.createElement('img');
lib.imgSize[el.vmlBg] = img;
img.className = lib.ns + '_sizeFinder';
img.runtimeStyle.cssText = 'behavior:none;
position:absolute;
left:-10000px;
top:-10000px;
border:none;
';
/* make sure to set behavior to none to prevent accidental matching of the helper elements! */
img.attachEvent('onload',function(){
this.width = this.offsetWidth;
/* weird cache-busting requirement! */
this.height = this.offsetHeight;
lib.vmlOffsets(el);
}
);
img.src = el.vmlBg;
img.removeAttribute('width');
img.removeAttribute('height');
document.body.insertBefore(img,document.body.firstChild);
}
el.vml.image.fill.src = el.vmlBg;
noImg = false;
}
el.vml.image.fill.on = !noImg;
el.vml.image.fill.color = 'none';
el.vml.color.shape.style.backgroundColor = elStyle.backgroundColor;
el.runtimeStyle.backgroundImage = 'none';
el.runtimeStyle.backgroundColor = 'transparent';
}
,/* IE can't figure out what do when the offsetLeft and the clientLeft add up to 1,and the VML ends up getting fuzzy... so we have to push/enlarge things by 1 pixel and then clip off the excess */
vmlOffsets:function(el){
var thisStyle = el.currentStyle;
var size ={
'W':el.clientWidth+1,'H':el.clientHeight+1,'w':this.imgSize[el.vmlBg].width,'h':this.imgSize[el.vmlBg].height,'L':el.offsetLeft,'T':el.offsetTop,'bLW':el.clientLeft,'bTW':el.clientTop}
;
var fudge = (size.L + size.bLW == 1) ? 1:0;
/* vml shape,left,top,width,height,origin */
var makeVisible = function(vml,l,t,w,h,o){
vml.coordsize = w+','+h;
vml.coordorigin = o+','+o;
vml.path = 'm0,0l'+w+',0l'+w+','+h+'l0,'+h+' xe';
vml.style.width = w + 'px';
vml.style.height = h + 'px';
vml.style.left = l + 'px';
vml.style.top = t + 'px';
}
;
makeVisible(el.vml.color.shape,(size.L + (el.isImg ? 0:size.bLW)),(size.T + (el.isImg ? 0:size.bTW)),(size.W-1),(size.H-1),0);
makeVisible(el.vml.image.shape,(size.L + size.bLW),(size.T + size.bTW),(size.W),(size.H),1);
var bg ={
'X':0,'Y':0}
;
var figurePercentage = function(axis,position){
var fraction = true;
switch(position){
case 'left':case 'top':bg[axis] = 0;
break;
case 'center':bg[axis] = .5;
break;
case 'right':case 'bottom':bg[axis] = 1;
break;
default:if (position.search('%') != -1){
bg[axis] = parseInt(position)*.01;
}
else{
fraction = false;
}
}
var horz = (axis == 'X');
bg[axis] = Math.ceil(fraction ? ( (size[horz?'W':'H'] * bg[axis]) - (size[horz?'w':'h'] * bg[axis]) ):parseInt(position));
if (bg[axis] == 0){
bg[axis]++;
}
}
;
for (var b in bg){
figurePercentage(b,thisStyle['backgroundPosition'+b]);
}
el.vml.image.fill.position = (bg.X/size.W) + ',' + (bg.Y/size.H);
var bgR = thisStyle.backgroundRepeat;
var dC ={
'T':1,'R':size.W+fudge,'B':size.H,'L':1+fudge}
;
/* these are defaults for repeat of any kind */
var altC ={
'X':{
'b1':'L','b2':'R','d':'W'}
,'Y':{
'b1':'T','b2':'B','d':'H'}
}
;
if (bgR != 'repeat'){
var c ={
'T':(bg.Y),'R':(bg.X+size.w),'B':(bg.Y+size.h),'L':(bg.X)}
;
/* these are defaults for no-repeat - clips down to the image location */
if (bgR.search('repeat-') != -1){
/* now let's revert to dC for repeat-x or repeat-y */
var v = bgR.split('repeat-')[1].toUpperCase();
c[altC[v].b1] = 1;
c[altC[v].b2] = size[altC[v].d];
}
if (c.B > size.H){
c.B = size.H;
}
el.vml.image.shape.style.clip = 'rect('+c.T+'px '+(c.R+fudge)+'px '+c.B+'px '+(c.L+fudge)+'px)';
}
else{
el.vml.image.shape.style.clip = 'rect('+dC.T+'px '+dC.R+'px '+dC.B+'px '+dC.L+'px)';
}
}
,fixPng:function(el){
el.style.behavior = 'none';
if (el.nodeName == 'BODY' || el.nodeName == 'TD' || el.nodeName == 'TR'){
/* elements not supported yet */
return;
}
el.isImg = false;
if (el.nodeName == 'IMG'){
if(el.src.toLowerCase().search(/\.png$/) != -1){
el.isImg = true;
el.style.visibility = 'hidden';
}
else{
return;
}
}
else if (el.currentStyle.backgroundImage.toLowerCase().search('.png') == -1){
return;
}
var lib = DD_belatedPNG;
el.vml ={
color:{
}
,image:{
}
}
;
var els ={
shape:{
}
,fill:{
}
}
;
for (var r in el.vml){
for (var e in els){
var nodeStr = lib.ns + ':' + e;
el.vml[r][e] = document.createElement(nodeStr);
}
el.vml[r].shape.stroked = false;
el.vml[r].shape.appendChild(el.vml[r].fill);
el.parentNode.insertBefore(el.vml[r].shape,el);
}
el.vml.image.shape.fillcolor = 'none';
/* Don't show blank white shapeangle when waiting for image to load. */
el.vml.image.fill.type = 'tile';
/* Ze magic!! Makes image show up. */
el.vml.color.fill.on = false;
/* Actually going to apply vml element's style.backgroundColor,so hide the whiteness. */
lib.attachHandlers(el);
lib.giveLayout(el);
lib.giveLayout(el.offsetParent);
/* set up element */
lib.applyVML(el);
}
}
;
try{
document.execCommand("BackgroundImageCache",false,true);
/* TredoSoft Multiple IE doesn't like this,so try{
}
it */
}
catch(r){
}
DD_belatedPNG.createVmlNameSpace();
DD_belatedPNG.createVmlStyleSheet();
CSS代码(global.css):
/* Make HTML 5 elements display block-level for consistent styling */
header,nav,article,footer,address{display:block;}
/* Navigation */
.hor-list li{display:inline;}
.hor-list li li{display:block;}
.piped li:before{content:"|";padding:0 5px;}
.piped li:first-child:before{content:"";padding:0}
.breadcrumbs li:before{content:"/";padding:0 5px;}
.breadcrumbs li:first-child:before{content:"";padding:0}
.piped li,.breadcrumbs li{*padding-left:5px !important;}
.piped li:first-child,.breadcrumbs li:first-child{*padding-left:0 !important}
/* Typography */
.right{float:right;}
.left{float:left;}
.align-left{text-align:left;}
.align-right{text-align:right;}
.center{text-align:center;}
.justify{text-align:justify;}
strong,b,.bold,.strong{font-weight:bold;}
em,i,.italic,cite{font-style:italic;}
.underline{text-decoration:underline;}
.centered{display:block;margin:0 auto}
img.alignleft{float:left;margin:4px 10px 4px 0;}
img.alignright{float:right;margin:4px 0 4px 10px;}
.block{display:block}
ins{font-size:1em;text-decoration:none;vertical-align:super;}
code,pre{font-family:"Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace;}
.numbered{list-style:decimal-leading-zero inside;}
.disc{list-style:disc inside;}
abbr,acronym{border-bottom:1px dotted #161a1f}
pre{background:url(../images/code_bg.gif);padding:20px 10px;border-radius:1px 1px 1px 1px;box-shadow:0 0 2px rgba(0,0,0,0.1);display:block;border:1px solid #E0E0E0;overflow:auto;font-size:12px;line-height:20px;margin:15px 0;white-space:pre-wrap;}
dd{margin-left:2em;}
.hide{display:none;}
.show{display:block;}
.vAlign{vertical-align:middle;}
.vl{font-size:12px;padding:0px 4px;}
/* Footer */
html,body{height:100%;}
#wrap{min-height:100%}
#main{overflow:auto;padding-bottom:50px;}
/* must be same height as the footer */
footer{position:relative;margin-top:-50px;height:50px;clear:both;}
body:before{content:"";height:100%;float:left;width:0;margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
CSS代码(reset.css):
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
a{/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
blr:expression(this.onFocus = this.blur () );}
* html,* html body /* 修正IE6振动bug */
{background-image:url(about:blank);background-attachment:fixed;}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}
.alwaystop{position:fixed;_position:absolute;_top:expression(( document.compatMode == 'CSS1Compat') ? documentElement.scrollTop:document.body.scrollTop );top:0;left:0;right:0;z-index:10000000;}
.alwaysbottom{position:fixed;_position:absolute;_top:expression(eval(( document.compatMode && document.compatMode == 'CSS1Compat') ? documentElement.scrollTop + documentElement.clientHeight - this.clientHeight:document.body.scrollTop + document.body.clientHeight - this.clientHeight ) );bottom:0;left:0;right:0;z-index:10000000;}
CSS代码(style.css):
@import url('reset.css');@import url('global.css');html,body{font-family:'宋体';font-size:13px;background:#273900;background:url("../images/bg_html.jpg") fixed top center repeat;}
.sw_main{min-width:960px;margin:0 auto;}
.sw_container{margin-left:auto;margin-right:auto;width:960px;}
/** * top style */
.sw_top1{height:60px;box-shadow:0px 1px 3px 0px #000000;background:#000000;filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;opacity:0.4;}
.sw_top{height:120px;}
分享到QQ
分享到微博
微信扫一扫
