设为首页收藏本站关注微信<<< 抵制 IE6 人人有责 >>>
开启辅助访问 切换到窄版
搜索
热搜: 活动 交友 discuz
返回列表 发新帖
查看: 1763|回复: 0
打印 上一主题 下一主题

[Jquery] 基于jQuery上下滑动及左右切换导航菜单代码

[复制链接]
kevin-ying
跳转到指定楼层
楼主
发表于 2015-9-23 02:25:29 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
[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:文歌提供([url]www.kevin-ying.com[/url])</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([img]http://date.kevin-ying.com/bbs_up/album/201509/23/022255yv8zoq5ee3vbc3w2.png[/img]) 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([img]http://date.kevin-ying.com/bbs_up/album/201509/23/022255yv8zoq5ee3vbc3w2.png[/img]) 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([img]http://date.kevin-ying.com/bbs_up/album/201509/23/022255yv8zoq5ee3vbc3w2.png[/img]) 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([img]http://date.kevin-ying.com/bbs_up/album/201509/23/022255yv8zoq5ee3vbc3w2.png[/img]);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>

左右
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享淘帖

相关帖子
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|手机版|Archiver|源于生活(个人生活娱乐工作的笔记)css3,html5,学习笔记    

GMT+8, 2024-5-5 00:09 , Processed in 0.078000 second(s), 27 queries .

Powered by Mr.Kevin-ying

© 2004-2015

快速回复 返回顶部 返回列表