基于jQuery實現天貓滾動折疊導航特效



41 160 54



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

加群請備注:從官網了解到

老夫子电子