基于jQuery实现天猫滚动折叠导航特效



46 181 61



特效描述:基于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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 收缩菜单 收缩导航 右键菜单 导航切换 菜单切换 浮动菜单 浮动导航 flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 滑动导航菜单 滑动导航 滑动菜单 滚动导航菜单 滚动菜单 滚动导航 滑动选项卡 滑动切换 滚动切换 滚动条切换 自动滚动图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 收缩展开 展开收缩 收缩 展开 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 滚动导航菜单 滚动菜单 滚动导航 导航切换 菜单切换 收缩菜单 收缩导航 侧边菜单 侧边导航 导航菜单插件 导航插件 菜单插件 文字导航菜单 文字导航 文字菜单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到