经验分享程序开发文档资料数据资源其它资源

手机端jQuery响应式菜单栏代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 手机端jQuery响应式菜单栏代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

手机端jQuery响应式菜单栏代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为手机端jQuery响应式菜单栏代码，属于站长常用代码" />
<title>手机端jQuery响应式菜单栏代码</title>
<!--[if lt IE 9]> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<link rel="stylesheet" href="css/lrtk.css" media="all" />
<link rel="stylesheet" href="css/meanmenu.min.css" media="all" />
<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
</head>
<body>
<!-- 代码 开始 -->
<header>
	<nav>
		<ul>
			<li><a href="#">Top Level Link1</a>
				<ul>
					<li><a href="#">Second Level Link</a>
						<ul>
							<li><a href="#">Third Level Link</a></li>
							<li><a href="#">Third Level Link</a></li>
							<li><a href="#">Third Level Link</a>
								<ul>
									<li><a href="#">Fourth Level Link</a></li>
									<li><a href="#">Fourth Level Link</a></li>
									<li><a href="#">Fourth Level Link with extra long name so it wraps</a>
										<ul>
											<li><a href="#">Fifth Level Link</a></li>
											<li><a href="#">Fifth Level Link</a></li>
											<li><a href="#">Fifth Level Link</a></li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">Second Level Link</a></li>
					<li><a href="#">Second Level Link</a></li>
				</ul>
			</li>
			<li><a href="#">Top Level Link2</a>
				<ul>
					<li><a href="#">Second Level Link</a>
						<ul>
							<li><a href="#">Third Level Link</a></li>
							<li><a href="#">Third Level Link</a></li>
							<li><a href="#">Third Level Link</a>
								<ul>
									<li><a href="#">Fourth Level Link</a></li>
									<li><a href="#">Fourth Level Link</a></li>
									<li><a href="#">Fourth Level Link with extra long name so it wraps</a>
										<ul>
											<li><a href="#">Fifth Level Link</a></li>
											<li><a href="#">Fifth Level Link</a></li>
											<li><a href="#">Fifth Level Link</a></li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">Second Level Link</a></li>
					<li><a href="#">Second Level Link</a></li>
				</ul>			
			</li>
			<li><a href="#">Top Level Link3</a></li>
			<li><a href="#">Top Level Link4</a></li>
		</ul>
	</nav>
</header>

<section>
	<article>
		<h1>请把浏览器宽度调整到480像素查看效果</h1>
	</article>
</section>

<script src="js/jquery-1.9.1.js"></script> 
<script src="js/jquery.meanmenu.min.js"></script> 
<script>
jQuery(document).ready(function () {
    jQuery('header nav').meanmenu();
});
</script>
<!-- 代码 结束 -->
</body>
</html>

JS代码(jquery.meanmenu.min.js):

/*! * jQuery meanMenu v2.0.6 * @Copyright (C) 2012-2013 Chris Wharton (https://github.com/weare2ndfloor/meanMenu) * */
!function(e){
	"use strict";
	e.fn.meanmenu=function(n){
	var a={
	meanMenuTarget:jQuery(this),meanMenuContainer:"body",meanMenuClose:"X",meanMenuCloseSize:"18px",meanMenuOpen:"<span /><span /><span />",meanRevealPosition:"right",meanRevealPositionDistance:"0",meanRevealColour:"",meanRevealHoverColour:"",meanScreenWidth:"480",meanNavPush:"",meanShowChildren:!0,meanExpandableChildren:!0,meanExpand:"+",meanContract:"-",meanRemoveAttrs:!1,onePage:!1,removeElements:""}
,n=e.extend(a,n),t=window.innerWidth||document.documentElement.clientWidth;
	return this.each(function(){
	function e(){
	if("center"==c){
	var e=window.innerWidth||document.documentElement.clientWidth,n=e/2-22+"px";
	P="left:"+n+";
	right:auto;
	",A?jQuery(".meanmenu-reveal").animate({
	left:n}
):jQuery(".meanmenu-reveal").css("left",n)}
}
function a(){
	jQuery(W).is(".meanmenu-reveal.meanclose")?W.html(o):W.html(s)}
function r(){
	jQuery(".mean-bar,.mean-push").remove(),jQuery(m).removeClass("mean-container"),jQuery(u).show(),E=!1,M=!1,jQuery(x).removeClass("mean-remove")}
function i(){
	if(d>=t){
	jQuery(x).addClass("mean-remove"),M=!0,jQuery(m).addClass("mean-container"),jQuery(".mean-container").prepend('<div class="mean-bar"><a href="#nav" class="meanmenu-reveal" style="'+R+'">Show Navigation</a><nav class="mean-nav"></nav></div>');
	var e=jQuery(u).html();
	jQuery(".mean-nav").html(e),C&&jQuery("nav.mean-nav ul,nav.mean-nav ul *").each(function(){
	jQuery(this).removeAttr("class"),jQuery(this).removeAttr("id")}
),jQuery(u).before('<div class="mean-push" />'),jQuery(".mean-push").css("margin-top",y),jQuery(u).hide(),jQuery(".meanmenu-reveal").show(),jQuery(j).html(s),W=jQuery(j),jQuery(".mean-nav ul").hide(),Q?f?(jQuery(".mean-nav ul ul").each(function(){
	jQuery(this).children().length&&jQuery(this,"li:first").parent().append('<a class="mean-expand" href="#" style="font-size:'+l+'">'+g+"</a>")}
),jQuery(".mean-expand").on("click",function(e){
	e.preventDefault(),jQuery(this).hasClass("mean-clicked")?(jQuery(this).text(g),jQuery(this).prev("ul").slideUp(300,function(){
}
)):(jQuery(this).text(p),jQuery(this).prev("ul").slideDown(300,function(){
}
)),jQuery(this).toggleClass("mean-clicked")}
)):jQuery(".mean-nav ul ul").show():jQuery(".mean-nav ul ul").hide(),jQuery(".mean-nav ul li").last().addClass("mean-last"),W.removeClass("meanclose"),jQuery(W).click(function(e){
	e.preventDefault(),0==E?(W.css("text-align","center"),W.css("text-indent","0"),W.css("font-size",l),jQuery(".mean-nav ul:first").slideDown(),E=!0):(jQuery(".mean-nav ul:first").slideUp(),E=!1),W.toggleClass("meanclose"),a(),jQuery(x).addClass("mean-remove")}
),w&&jQuery(".mean-nav ul > li > a:first-child").on("click",function(){
	jQuery(".mean-nav ul:first").slideUp(),E=!1,jQuery(W).toggleClass("meanclose").html(s)}
)}
else r()}
var u=n.meanMenuTarget,m=n.meanMenuContainer;
	n.meanReveal;
	var o=n.meanMenuClose,l=n.meanMenuCloseSize,s=n.meanMenuOpen,c=n.meanRevealPosition,v=n.meanRevealPositionDistance,h=n.meanRevealColour;
	n.meanRevealHoverColour;
	var d=n.meanScreenWidth,y=n.meanNavPush,j=".meanmenu-reveal",Q=n.meanShowChildren,f=n.meanExpandableChildren,g=n.meanExpand,p=n.meanContract,C=n.meanRemoveAttrs,w=n.onePage,x=n.removeElements;
	if(navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPod/i)||navigator.userAgent.match(/iPad/i)||navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/Blackberry/i)||navigator.userAgent.match(/Windows Phone/i))var A=!0;
	(navigator.userAgent.match(/MSIE 8/i)||navigator.userAgent.match(/MSIE 7/i))&&jQuery("html").css("overflow-y","scroll");
	var E=!1,M=!1;
	if("right"==c&&(P="right:"+v+";
	left:auto;
	"),"left"==c)var P="left:"+v+";
	right:auto;
	";
	e();
	var R="background:"+h+";
	color:"+h+";
	"+P,W="";
	A||jQuery(window).resize(function(){
	t=window.innerWidth||document.documentElement.clientWidth,t>d?r():r(),d>=t?(i(),e()):r()}
),window.onorientationchange=function(){
	e(),t=window.innerWidth||document.documentElement.clientWidth,t>=d&&r(),d>=t&&0==M&&i()}
,i()}
)}
}
(jQuery);

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
/* Basic CSS */
body{margin:0;padding:0;font:16px/1.5 "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;}
h1{font-size:28px;font-weight:100;text-align:center;}
header nav{text-align:center;background:#efefef;}
header nav ul{margin:0;padding:1em;list-style-type:none;}
header nav ul li{display:inline;margin-left:1em;}
header nav ul li:first-child{margin-left:0;}
header nav ul li ul{display:none;}
a{color:#f77564;}
a:hover{color:#333;}
a,a:hover{-o-transition:color 0.25s ease-in;-webkit-transition:color 0.25s ease-in;-moz-transition:color 0.25s ease-in;transition:color 0.25s ease-in;}
section,article,header{display:block;float:left;width:100%;}
article{width:96%;padding:3em 2%;}

CSS代码(meanmenu.min.css):

/*! #######################################################################MeanMenu 2.0.6--------To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/)####################################################################### */
a.meanmenu-reveal{display:none}
.mean-container .mean-bar{float:left;width:100%;position:relative;background:#0c1923;padding:4px 0;min-height:42px;z-index:999999}
.mean-container a.meanmenu-reveal{width:22px;height:22px;padding:13px 13px 11px;position:absolute;top:0;right:0;cursor:pointer;color:#fff;text-decoration:none;font-size:16px;text-indent:-9999em;line-height:22px;font-size:1px;display:block;font-family:Arial,Helvetica,sans-serif;font-weight:700}
.mean-container a.meanmenu-reveal span{display:block;background:#fff;height:3px;margin-top:3px}
.mean-container .mean-nav{float:left;width:100%;background:#0c1923;margin-top:44px}
.mean-container .mean-nav ul{padding:0;margin:0;width:100%;list-style-type:none}
.mean-container .mean-nav ul li{position:relative;float:left;width:100%}
.mean-container .mean-nav ul li a{display:block;float:left;width:90%;padding:1em 5%;margin:0;text-align:left;color:#fff;border-top:1px solid #383838;border-top:1px solid rgba(255,255,255,.5);text-decoration:none;text-transform:uppercase}
.mean-container .mean-nav ul li li a{width:80%;padding:1em 10%;border-top:1px solid #f1f1f1;border-top:1px solid rgba(255,255,255,.25);opacity:.75;filter:alpha(opacity=75);text-shadow:none!important;visibility:visible}
.mean-container .mean-nav ul li.mean-last a{border-bottom:0;margin-bottom:0}
.mean-container .mean-nav ul li li li a{width:70%;padding:1em 15%}
.mean-container .mean-nav ul li li li li a{width:60%;padding:1em 20%}
.mean-container .mean-nav ul li li li li li a{width:50%;padding:1em 25%}
.mean-container .mean-nav ul li a:hover{background:#252525;background:rgba(255,255,255,.1)}
.mean-container .mean-nav ul li a.mean-expand{margin-top:1px;width:26px;height:32px;padding:12px!important;text-align:center;position:absolute;right:0;top:0;z-index:2;font-weight:700;background:rgba(255,255,255,.1);border:0!important;border-left:1px solid rgba(255,255,255,.4)!important;border-bottom:1px solid rgba(255,255,255,.2)!important}
.mean-container .mean-nav ul li a.mean-expand:hover{background:rgba(0,0,0,.9)}
.mean-container .mean-push{float:left;width:100%;padding:0;margin:0;clear:both}
.mean-nav .wrapper{width:100%;padding:0;margin:0}
.mean-container .mean-bar,.mean-container .mean-bar *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
.mean-remove{display:none!important}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
85.23 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
85.23 KB
立即下载
司徒眉舒
了解
打赏作者 鼓励作者
Html Js 菜单导航特效5
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章