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

手机端左侧弹性导航菜单特效代码

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

以下是 手机端左侧弹性导航菜单特效代码 的示例演示效果:

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

部分效果截图:

手机端左侧弹性导航菜单特效代码

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="此代码内容为手机端左侧弹性导航菜单，属于站长常用代码" />
<title>手机端左侧弹性导航菜单</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/lrtk.css" />
<link rel="stylesheet" type="text/css" href="css/sidebar.css" />
<script src="js/snap.svg-min.js"></script>
<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->	
</head>
<body class="theme-1">
<!-- 代码 开始 -->
			<nav id="menu" class="menu">
				<button class="menu__handle"><span>Menu</span></button>
				<div class="menu__inner">
					<ul>
						<li><a href="#"><span ><p align=center ><font size='5'>男人<span></font></p></a></li>
						<li><a href="#"><span ><p align=center ><font size='5'>女人<span></font></p></a></li>
						<li><a href="#"><span ><p align=center ><font size='5'>数码<span></font></p></a></li>
						<li><a href="#"><span ><p align=center ><font size='5'>家居<span></font></p></a></li>
						<li><a href="#"><span ><p align=center ><font size='5'>母婴<span></font></p></a></li>
						<li><a href="#"><span ><p align=center ><font size='5'>美食<span></font></p></a></li>
						<li><a href="#"><span ><p align=center ><font size='5'>美妆<span></font></p></a></li>
						<li><a href="#"><span ><p align=center ><font size='5'>箱包<span></font></p></a></li>
						<li><a href="#"><span ><p align=center ><font size='5'>运动<span></font></p></a></li>
						<li><a href="#"><span ><p align=center ><font size='5'>书籍<span></font></p></a></li>
					</ul>
				</div>
				<div class="morph-shape" data-morph-open="M300-10c0,0,295,164,295,410c0,232-295,410-295,410" data-morph-close="M300-10C300-10,5,154,5,400c0,232,295,410,295,410">
					<svg width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="none">
						<path fill="none" d="M300-10c0,0,0,164,0,410c0,232,0,410,0,410"/>
					</svg>
				</div>
			</nav>
			<div class="main">
				<header class="codrops-header">
				</header>
			</div><!-- /main -->
<script src="js/classie.js"></script>
<script src="js/lrtk.js"></script>
</body>
</html>

JS代码(lrtk.js):

(function(){
	function SVGMenu(el,options){
	this.el = el;
	this.init();
}
SVGMenu.prototype.init = function(){
	this.trigger = this.el.querySelector('button.menu__handle');
	this.shapeEl = this.el.querySelector('div.morph-shape');
	var s = Snap(this.shapeEl.querySelector('svg'));
	this.pathEl = s.select('path');
	this.paths ={
	reset:this.pathEl.attr('d'),open:this.shapeEl.getAttribute('data-morph-open'),close:this.shapeEl.getAttribute('data-morph-close')}
;
	this.isOpen = false;
	this.initEvents();
}
;
	SVGMenu.prototype.initEvents = function(){
	this.trigger.addEventListener('click',this.toggle.bind(this));
}
;
	SVGMenu.prototype.toggle = function(){
	var self = this;
	if (this.isOpen){
	classie.remove(self.el,'menu--anim');
	setTimeout(function(){
	classie.remove(self.el,'menu--open');
}
,250);
}
else{
	classie.add(self.el,'menu--anim');
	setTimeout(function(){
	classie.add(self.el,'menu--open');
}
,250);
}
this.pathEl.stop().animate({
	'path':this.isOpen ? this.paths.close:this.paths.open}
,350,mina.easeout,function(){
	self.pathEl.stop().animate({
	'path':self.paths.reset}
,800,mina.elastic);
}
);
	this.isOpen = !this.isOpen;
}
;
	new SVGMenu(document.getElementById('menu'));
}
)();

CSS代码(lrtk.css):

 *,*:after,*:before{-webkit-box-sizing:border-box;box-sizing:border-box;}
.clearfix:before,.clearfix:after{content:'';display:table;}
.clearfix:after{clear:both;}
body{color:#fff;background:#2f3238;font-weight:400;font-size:1em;font-family:'Raleway',Arial,sans-serif;}
a{color:#B24E51;text-decoration:none;}
a:hover,a:focus{color:#afb3b8;outline:none;}
.theme-2{background:#434d55;}
.theme-2 a{color:#4991C2;}
.theme-2 a:hover,.theme-2 a:focus{color:#74777b;}
.theme-3{background:#e4eaea;color:#74777b;}
.theme-3 a{color:#e35583;}
.theme-3 a:hover,.theme-3 a:focus{color:#74777b;}
.theme-4 a{color:#6EAE8C;}
.theme-4 a:hover,.theme-4 a:focus{color:#74777b;}
.theme-5{background:#e4eaea;color:#74777b;}
.theme-5 a{color:#EA8686;}
.theme-5 a:hover,.theme-5 a:focus{color:#74777b;}
.theme-6 a{color:#CFB75C;}
.theme-6 a:hover,.theme-6 a:focus{color:#74777b;}
.theme-7{background:#E8E8E8;color:#FF72AD;}
.theme-7 a{color:#415c71;}
.theme-7 a:hover,.theme-7 a:focus{color:#509EDB;}
.theme-8 a{color:#938edc;}
.theme-9{background:#3D4444;color:#DADADA;}
.theme-9 a{color:#DA7071;}
.theme-9 a:hover,.theme-9 a:focus{color:#74777b;}
.content{min-height:250px;margin:0 auto;padding-bottom:2em;}
.content--tiny{max-width:800px;}
.container{text-align:center;padding:5.25em 0.5em 0;}
/* Header */
 .codrops-header{padding:0;letter-spacing:-1px;}
.codrops-header h1{font-weight:800;font-size:3.5em;line-height:1;margin:0;}
.codrops-header h1 span{display:block;font-size:35%;letter-spacing:1px;padding-top:0.75em;color:#afb3b8;}
/* To Navigation Style */
 .codrops-links{text-transform:uppercase;font-weight:300;font-size:1.25em;}
.codrops-links a{display:inline-block;padding:0.5em 0;margin:0.5em;text-decoration:none;letter-spacing:1px;}
.codrops-icon span{display:none;}
.codrops-icon:before{margin:0 4px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'codropsicons';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
.codrops-icon-drop:before{content:"\e001";}
.codrops-icon-prev:before{content:"\e004";}
/* Codrops demo links */
 .codrops-demos{margin:3em auto;max-width:700px;}
.codrops-demos a{font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:0.25em 0;margin:5px 10px;display:inline-block;font-size:0.85em;}
.codrops-demos a.current-demo{opacity:0.5;}
/* Related demos */
 .related{text-align:center;padding:10em 0;clear:both;font-weight:bold;}
.related > a{width:200px;display:inline-block;text-align:center;margin:1em;font-size:0.8em;vertical-align:top;}
.related a img{max-width:100%;opacity:0.8;}
.related a:hover img,.related a:active img{opacity:1;}
.related a h3{margin:0;font-size:;padding:0.5em 0 0.3em;max-width:200px;text-align:left;}
@media screen and (max-width:30em){.codrops-header h1{font-size:3em;}
}

CSS代码(normalize.css):

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}

CSS代码(sidebar.css):

.menu{position:fixed;width:300px;top:3em;bottom:3em;left:0;z-index:100;overflow:hidden;-webkit-transform:translate3d(-150px,0,0);transform:translate3d(-150px,0,0);-webkit-transition:-webkit-transform 0.6s;transition:transform 0.6s;}
.menu.menu--open{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.main{-webkit-transition:opacity 0.6s;transition:opacity 0.6s;}
.menu.menu--open + .main{opacity:0.3;pointer-events:none;}
.menu__inner{width:calc(100% + 25px);padding:0 140px 2em 0;overflow-y:auto;height:100%;position:relative;z-index:100;}
.menu ul{list-style:none;padding:0;margin:0;}
.menu ul li{margin:0 0 2em 0;-webkit-transform:translate3d(-150px,0,0);transform:translate3d(-150px,0,0);-webkit-transition:-webkit-transform 0.6s;transition:transform 0.6s;}
.menu.menu--anim ul li{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.menu ul li:first-child{-webkit-transition-delay:0.3s;transition-delay:0.3s;}
.menu ul li:nth-child(2){-webkit-transition-delay:0.2s;transition-delay:0.2s;}
.menu ul li:nth-child(3){-webkit-transition-delay:0.1s;transition-delay:0.1s;}
.menu ul li a{display:block;outline:none;}
.menu ul li .fa{font-size:2.5em;display:block;margin:0 auto;color:#5f656f;}
.menu ul li span{font-weight:bold;font-size:0.75em;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
.menu__handle{background:#2f3238;border:none;width:30px;height:24px;padding:0;outline:none;position:absolute;top:3px;right:70px;z-index:2000;}
.menu__handle::before,.menu__handle::after,.menu__handle span{background:#5f656f;}
.menu__handle::before,.menu__handle::after{content:'';position:absolute;height:2px;width:100%;left:0;top:50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transition:-webkit-transform 0.25s;transition:transform 0.25s;}
.menu__handle span{position:absolute;width:100%;height:2px;left:0;overflow:hidden;text-indent:200%;-webkit-transition:opacity 0.25s;transition:opacity 0.25s;}
.menu__handle::before{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0);}
.menu__handle::after{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0);}
.menu--open .menu__handle span{opacity:0;}
.menu--open .menu__handle::before{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);}
.menu--open .menu__handle::after{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);}
.morph-shape{position:absolute;width:240px;height:100%;top:0;right:0;}
.morph-shape svg path{stroke:#5f656f;stroke-width:5px;}
@media screen and (max-width:63em){.main{padding:0 2em;-webkit-transition:opacity 0.6s;transition:opacity 0.6s;}
.menu{-webkit-transform:translate3d(-170px,0,0);transform:translate3d(-170px,0,0);}
.menu.menu--open + .main{opacity:0.05;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
300.85 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
300.85 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
打赏文章