基于jQuery上下滑动及左右切换导航菜单代码 - 源于生活

[HTML] 纯文本查看 复制代码
<html xml:lang="zh-cn">

<head>

<meta charset="utf-8" />

<meta http-equiv="Pragma" content="no-cache" />

<meta name="Copyright" content="www.kevin-ying.com" />

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

<meta content="yes" name="apple-mobile-web-app-capable">

<meta content="black" name="apple-mobile-web-app-status-bar-style">

<meta content="telephone=no" name="format-detection">

<meta content="email=no" name="format-detection">

<link href="http://www.kevin-ying.com/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<title>基于jQuery上下滑动及左右切换导航菜单代码 | 源与生活 站长工具 by:文歌提供(www.kevin-ying.com)</title>



<script type="text/javascript" src="http://www.kevin-ying.com/jq/jquery-2.1.4.min.js""></script>

<script>

$(function () {

  //navlist

  $('#navList').on('click', '.nav-btn', function(event) {

    if($(this).hasClass('btn-active')){

      $('#expandZone #closeBtn').click();

      return false;

    }

    var curIndex = $(this).index()

      , mlValue = '-' + curIndex * 100 + '%';

    if( $('#expandZone').hasClass('active') ){

      $('#expandZone .download').animate({marginLeft: mlValue});

    }

    else{

      $('#expandZone .download').css({marginLeft: mlValue});

    }

    var device = $(this).data('device');

    $(this).addClass('btn-active').siblings().removeClass('btn-active');

    $(device).addClass('item-active').siblings().removeClass('item-active');

    $('#expandZone').animate({height: '130px'}).addClass('active');

    return false;

  });



  $('#expandZone #closeBtn').on('click', function() {

    $('#expandZone').animate({height: '0px'}, function () {

      $(this).removeClass('active');

      $('#navList .btn-active').removeClass('btn-active');

    });

    return false;

  });

});

</script>

<style>

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, 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,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}

body{ font-family:"Microsoft Yahei", "微软雅黑", Tahoma, Arial, sans-serif}



.header{width:1105px;margin:0 auto;height:111px;padding:12px 0 18px;position:relative;*z-index:1}

.header .logo{height:86px;width:256px;margin-top:25px}



.top-nav .navlist-wrap{width:1050px;margin:0 auto;position:relative}

.top-nav .navlist{position:absolute;right:130PX;top:-40PX}

.top-nav .navlist .nav-btn{float:left;margin-left:60px;color:#666;vertical-align:middle;text-decoration:none}

.navlist .nav-btn span{background:url() no-repeat -29px -145px;display:inline-block;width:16px;height:16px;margin-left:4px;vertical-align:middle;*height:12px;*vertical-align:middle;*cursor:pointer;*letter-spacing:0;*margin-left:0;*background-position:-26px -145px}

.navlist .btn-active span{background:url() no-repeat -8px -145px;*background-position:-5px -145px}

.top-nav .expand{height:0px;background-color:#333d4d;overflow:hidden;position:relative;width:100%}

.expand .download{height:130px;width:500%;}

.expand .download .item{float:left;width:20%}

.expand .download .item-active{display:block}

.expand .close-btn{width:120px;height:20px;background:url() no-repeat -13px -117px;position:absolute;left:50%;bottom:-2px;margin-left:-60px;cursor:pointer;}

.download .download-list{text-align:center;height:56px;padding:37px}

.download .download-list .btn{display:inline-block;text-decoration:none;color:#586e91;font-size:18px;line-height:24px;margin:0 28px;cursor:pointer}

.download .download-list .btn:hover{color:#7896af}

.download-list .btn .icon{background-repeat:no-repeat;background-image:url();height:56px;width:56px;float:left}

.download-list .btn .text{float:left;padding:16px 0 16px 16px}

.download-list .zj .icon{background-position:-4px 0}

.download .download-list .zj{}

.download .download-list .zj:hover .icon{background-position:-5px -57px}

.download .download-list .sjgj{}

.download .download-list .sjgj .icon{background-position:-58px 0}

.download .download-list .sjgj:hover .icon{background-position:-59px -58px}

.download .download-list .wdj{}

.download-list .wdj .icon{background-position:-169px -4px}

.download-list .wdj:hover .icon{background-position:-169px -64px}

.download .download-list .jy{}

.download-list .jy .icon{background-position:-114px 0}

.download-list .jy:hover .icon{background-position:-114px -62px}

.download-list .apple .icon{background-position:-225px -1px;width:38px}

.download-list .apple:hover .icon{background-position:-225px -58px}

.download-list .itools .icon{background-position:-270px 0}

.download-list .itools:hover .icon{background-position:-270px -57px}

.top-nav .nav-bottom-bg{height:7px;_font-size:1px;background-color:#fff}



.btm{ margin:30px auto;}

.btm p{ font:normal 12px/24px 'Microsoft YaHei'; text-align:center;}



</style>

</head>

<body>

<!-- 代码 开始 -->

<div class="wrap">

        <div class="header">

                <h1 class="logo"><a href="http://www.kevin-ying.com" target="_blank"><img src="http://www.kevin-ying.com/template/dfsj_pwoekrx/dfsj_imgs/logo.png" alt=""></a></h1>

        </div>

        <div class="top-nav">

                <div id="navList" class="navlist-wrap">

                        <div class="navlist clearfix">

                                <a href="" class="nav-btn" data-device="#androidItem">Android<span>   </span></a>

                                <a href="" class="nav-btn" data-device="#iphoneItem">iPhone<span>   </span></a>

                                <a href="" class="nav-btn" data-device="#ipadItem">iPad<span>   </span></a>

                                <a href="" class="nav-btn" data-device="#pcItem">PC<span>   </span></a>

                                <a href="" class="nav-btn" data-device="#macItem">MAC<span>   </span></a>

                        </div>

                </div>

                <div id="expandZone" class="expand active">

                        <div class="download">

                                <div id="androidItem" class="item">

                                        <div class="download-list">

                                                <a href="http://www.kevin-ying.com" target="_blank" class="btn zj" id="download-link"><span class="icon"></span><span class="text">直接下载安装包</span></a>

                                                <a href="http://www.kevin-ying.com" target="_blank" class="btn sjgj" id="tencent_app_assistant_btn"><span class="icon"></span><span class="text">手机管家一键下载</span></a>

                                                <a href="http://www.kevin-ying.com" target="_blank" class="btn wdj"><span class="icon"></span><span class="text">豌豆荚一键下载</span></a>

                                        </div>

                                </div>

                                <div id="iphoneItem" class="item">

                                        <div class="download-list">

                                                <a href="http://www.kevin-ying.com" target="_blank" class="btn zj"><span class="icon"></span><span class="text">直接下载安装包</span></a>

                                                <a href="http://www.kevin-ying.com" target="_blank" class="btn apple"><span class="icon"></span><span class="text">AppStore免费下载</span></a>

                                                <a href="http://www.kevin-ying.com" target="_blank" title="iTools" class="btn itools"><span class="icon"></span><span class="text">itools一键安装</span></a>

                                        </div>

                                </div>

                                <div id="ipadItem" class="item">

                                        <div class="download-list">

                                                <a href="http://www.kevin-ying.com" target="_blank" class="btn zj"><span class="icon"></span><span class="text">直接下载安装包</span></a>

                                                <a href="http://www.kevin-ying.com" target="_blank" class="btn apple"><span class="icon"></span><span class="text">AppStore免费下载</span></a>

                                                <a href="http://www.kevin-ying.com" target="_blank" class="btn itools"><span class="icon"></span><span class="text">itools一键安装</span></a>

                                        </div>

                                </div>

                                <div id="pcItem" class="item">

                                        <div class="download-list">

                                                <a href="http://www.kevin-ying.com" target="_blank" class="btn zj"><span class="icon"></span><span class="text">直接下载安装包</span></a>

                                        </div>

                                </div>

                                <div id="macItem" class="item">

                                        <div class="download-list">

                                                <a href="http://www.kevin-ying.com" target="_blank" class="btn zj"><span class="icon"></span><span class="text">直接下载安装包</span></a>

                                        </div>

                                </div>

                        </div>

                        <div id="closeBtn" class="close-btn"></div>

                </div>

                <div class="nav-bottom-bg"></div>

        </div>

</div>