特效描述：基于jQuery实现 天猫滚动 折叠导航。基于jQuery实现天猫滚动折叠导航特效
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/style.css" />
2. 引入JS
<script type="text/javascript" src="js/jQuery.js"></script> <script type="text/javascript" src="js/jquery.tmailsider.js"></script>
3. HTML代码
<style type="text/css">
.menu .items ul li .on{
-webkit-transform: perspective(700px) translateY(0px) translateZ(0px) rotateX(0deg);
-moz-transform: perspective(700px) translateY(0px) translateZ(0px) rotateX(0deg);
-ms-transform: perspective(700px) translateY(0px) translateZ(0px) rotateX(0deg);
-o-transform: perspective(700px) translateY(0px) translateZ(0px) rotateX(0deg);
transform: perspective(700px) translateY(0px) translateZ(0px) rotateX(0deg);
-webkit-transition:all 600ms ease-in-out 0s;
-moz-transition:all 600ms ease-in-out 0s;
-ms-transition:all 600ms ease-in-out 0s;
-o-transition:all 600ms ease-in-out 0s;
transition:all 600ms ease-in-out 0s;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transform-origin: 50% 100% 0;
-moz-transform-origin: 50% 100% 0;
-ms-transform-origin: 50% 100% 0;
-o-transform-origin: 50% 100% 0;
transform-origin: 50% 100% 0;
line-height:25px;
height:25px;
}
.menu .items ul li .scroll {
-webkit-transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(-90deg);
-moz-transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(-90deg);
-ms-transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(-90deg);
-o-transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(-90deg);
box-shadow: 0 2px 2px #AAAAAA;
height:0px;
}
</style>
<div class="top">
<div class="middle">
<div class="logo">
<img src="images/logo.png" title="天猫tmall.com.com-上天猫，就够了" />
</div>
</div>
</div>
<div class="wrap">
<div class="main">main</div>
<div id="menu" class="menu">
<h1 class="title">
<a>所有商品分类</a>
<s class="btn_group bright">
<a class="bleft" title="扩展视图"></a>
<a class="bright" title="精简视图"></a>
</s>
</h1>
<div class="items">
<ul>
<li class="list-item0">
<h3>服装/内衣/配件</h3>
<p class="on">
<a href="#">女装</a>
<a href="#">男装</a>
<a href="#">内衣</a>
<a href="#">羽绒</a>
<a href="#">呢大衣</a>
</p>
<p class="on">
<a href="#">毛衣</a>
<a href="#">保暖</a>
<a href="#">睡衣</a>
<a href="#">男羽绒</a>
<a href="#">男毛衣</a>
</p>
</li>
<li class="list-item1 alt">
<h3>鞋/箱包</h3>
<p class="on">
<a href="#">女鞋</a>
<a href="#">男鞋</a>
<a href="#">雪地靴</a>
<a href="#">靴子</a>
<a href="#">男靴</a>
</p>
<p class="on">
<a href="#">箱包</a>
<a href="#">女包</a>
<a href="#">男包</a>
<a href="#">拉杆箱</a>
<a href="#">钱包</a>
</p>
</li>
<li class="list-item2">
<h3>珠宝饰品/手表眼睛</h3>
<p class="on">
<a href="#">珠宝</a>
<a href="#">足金</a>
<a href="#">钻戒</a>
<a href="#">玉镯</a>
<a href="#">珍珠</a>
</p>
<p class="on">
<a href="#">手表</a>
<a href="#">饰品</a>
<a href="#">毛衣链</a>
<a href="#">手链</a>
<a href="#">瑞士军刀</a>
</p>
</li>
<li class="list-item3 alt">
<h3>化妆品</h3>
<p class="on">
<a href="#">护肤</a>
<a href="#">彩妆</a>
<a href="#">假发</a>
<a href="#">香水</a>
<a href="#">男士护肤</a>
</p>
<p class="on">
<a href="#">套装</a>
<a href="#">面膜</a>
<a href="#">洁面</a>
<a href="#">眼霜</a>
<a href="#">BB霜</a>
<a href="#">爽肤水</a>
</p>
</li>
<li class="list-item4">
<h3>运动户外</h3>
<p class="on">
<a href="#">运动鞋</a>
<a href="#">运动服</a>
<a href="#">户外</a>
<a href="#">用品</a>
<a href="#">板鞋</a>
</p>
<p class="on">
<a href="#">跑步鞋</a>
<a href="#">羽绒服</a>
<a href="#">冲锋衣</a>
<a href="#">跑步机</a>
</p>
</li>
<li class="list-item5 alt">
<h3>手机数码</h3>
<p class="on">
<a href="#">手机</a>
<a href="#">相机</a>
<a href="#">笔记本</a>
<a href="#">平板</a>
<a href="#">硬件</a>
</p>
<p class="on">
<a href="#">配件</a>
<a href="#">视听</a>
<a href="#">移动存储</a>
<a href="#">台式机</a>
</p>
</li>
<li class="list-item6">
<h3>家用电器</h3>
<p class="on">
<a href="#">大家电</a>
<a href="#">影音</a>
<a href="#">电视</a>
<a href="#">耳机</a>
<a href="#">厨房</a>
</p>
<p class="on">
<a href="#">生活电器</a>
<a href="#">取暖器</a>
<a href="#">个人护理/保健</a>
</p>
</li>
<li class="list-item7 alt">
<h3>家具建材</h3>
<p class="on">
<a href="#">灯具</a>
<a href="#">卫浴</a>
<a href="#">油漆</a>
<a href="#">开关</a>
<a href="#">地板</a>
<a href="#">墙纸</a>
</p>
<p class="on">
<a href="#">沙发</a>
<a href="#">床</a>
<a href="#">衣柜</a>
<a href="#">床垫</a>
<a href="#">架类</a>
<a href="#">工具</a>
</p>
</li>
<li class="list-item8">
<h3>家纺/居家</h3>
<p class="on">
<a href="#">四件套</a>
<a href="#">蚕丝被</a>
<a href="#">冬被</a>
<a href="#">枕头</a>
<a href="#">家饰</a>
</p>
<p class="on">
<a href="#">厨房</a>
<a href="#">杯子</a>
<a href="#">清洁</a>
<a href="#">收纳</a>
<a href="#">宠物</a>
<a href="#">居家</a>
</p>
</li>
<li class="list-item9 alt">
<h3>母婴玩具</h3>
<p class="on">
<a href="#">奶粉</a>
<a href="#">尿裤</a>
<a href="#">童装</a>
<a href="#">孕产</a>
<a href="#">玩具</a>
<a href="#">车床</a>
</p>
<p class="on">
<a href="#">辅食</a>
<a href="#">用品</a>
<a href="#">童鞋</a>
<a href="#">月子</a>
<a href="#">大人玩乐</a>
</p>
</li>
<li class="list-item10">
<h3>食品</h3>
<p class="on">
<a href="#">零食</a>
<a href="#">坚果</a>
<a href="#">茶叶</a>
<a href="#">冲饮</a>
<a href="#">粮油</a>
<a href="#">生鲜</a>
</p>
<p class="on">
<a href="#">酒水</a>
<a href="#">白酒</a>
<a href="#">葡萄酒</a>
<a href="#">巧克力</a>
<a href="#">进口</a>
</p>
</li>
<li class="list-item11 alt">
<h3>医药保健</h3>
<p class="on">
<a href="#">保健</a>
<a href="#">滋补</a>
<a href="#">养生</a>
<a href="#">食疗</a>
<a href="#">提高免疫</a>
</p>
<p class="on">
<a href="#">药品</a>
<a href="#">血压</a>
<a href="#">美瞳</a>
<a href="#">计生</a>
<a href="#">体检</a>
</p>
</li>
<li class="list-item12">
<h3>汽车配件</h3>
<p class="on">
<a href="#">汽车</a>
<a href="#">汽车用品</a>
<a href="#">坐垫</a>
<a href="#">座套</a>
</p>
<p class="on">
<a href="#">脚垫</a>
<a href="#">GPS</a>
<a href="#">儿童安全座椅</a>
<a href="#">改装</a>
</p>
</li>
<li class="list-item13 alt">
<h3>图书音像</h3>
<p class="on">
<a href="#">考试</a>
<a href="#">儿童</a>
<a href="#">小说</a>
<a href="#">外语</a>
<a href="#">社科</a>
<a href="#">艺术</a>
</p>
<p class="on">
<a href="#">养生</a>
<a href="#">文学</a>
<a href="#">动漫</a>
<a href="#">杂志</a>
<a href="#">心理</a>
<a href="#">管理</a>
</p>
</li>
<li class="list-item14">
<h3>文化娱乐</h3>
<p class="on">
<a href="#">电子凭证</a>
<a href="#">小猫提货</a>
<a href="#">乐器</a>
<a href="#">旅游</a>
</p>
<p class="on">
<a href="#">网店软件</a>
<a href="#">古董字画</a>
<a href="#">个性定制</a>
</p>
</li>
<li class="list-item15 alt">
<h3>手机/网游点卡</h3>
</li>
</ul>
</div>
<div class="box">
<div class="hide">1、服装/内衣/配件</div>
<div class="hide">2、鞋/箱包</div>
<div class="hide">3、珠宝饰品/手表眼睛</div>
<div class="hide">4、化妆品</div>
<div class="hide">5、运动户外</div>
<div class="hide">6、手机数码</div>
<div class="hide">7、家用电器</div>
<div class="hide">8、家具建材</div>
<div class="hide">9、家纺/居家</div>
<div class="hide">10、母婴玩具</div>
<div class="hide">11、食品</div>
<div class="hide">12、医药保健</div>
<div class="hide">13、汽车配件</div>
<div class="hide">14、图书音像</div>
<div class="hide">15、文化娱乐</div>
<div class="hide">16、手机、点卡</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#menu').sliders();
})
//此段代码可以注视起来
/*********start fuck ie**********/
if(window.navigator.userAgent.indexOf('MSIE 6.0')!==-1){
alert('fuck IE')
}
/*********end fuck ie**********/
</script>
<div style="text-align:center;clear:both">
</div>
