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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

120 478 160



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



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


热门标签: 滚动导航菜单 导航切换 收缩导航菜单 二级导航菜单 滚动切换 文字收缩展开 下拉导航菜单 图片滚动 图片切换 图片收缩展开 竖直导航菜单 文字滚动 文字切换 图标导航菜单 背景切换 固定导航菜单 图片文字滚动 手风琴 侧边导航菜单 全屏滚动 选项卡自动切换 树形导航菜单 页面滚动 视频切换 网址导航菜单 列表切换 导航菜单插件 渐隐切换 文字导航菜单 全屏切换 切换按钮 缩放切换 滚动流动 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滚动切换 滑动选项卡切换 自动滚动图片轮播 选项卡切换 滑动手风琴 收缩收起展开 导航菜单导航条

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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