jQuery倾斜打开侧边栏菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery倾斜打开侧边栏菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery倾斜打开侧边栏菜单代码</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<!--<link rel='stylesheet prefetch' href='http://fonts.useso.com/css?family=Architects+Daughter'>-->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if IE]>
	<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div id="paper-back">
	<nav>
		<div class="close"></div>
		<a href="#">Home</a>
		<a href="#">About Us</a>
		<a href="#">Our Work</a>
		<a href="#">Contact</a>
	</nav>
</div>
<div id="paper-window">
	<div id="paper-front">
		<div class="hamburger"><span></span></div>
		<div id="container">
			<section>
				<p>点击左上角的按钮打开菜单</p>
			</section>
			<section></section>
		</div>
	</div>
</div>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
  var paperMenu = {
	$window: $('#paper-window'),
	$paperFront: $('#paper-front'),
	$hamburger: $('.hamburger'),
	offset: 1800,
	pageHeight: $('#paper-front').outerHeight(),
	open: function () {
		this.$window.addClass('tilt');
		this.$hamburger.off('click');
		$('#container, .hamburger').on('click', this.close.bind(this));
		this.hamburgerFix(true);
		// console.log('opening...');
	},
	close: function () {
		this.$window.removeClass('tilt');
		$('#container, .hamburger').off('click');
		this.$hamburger.on('click', this.open.bind(this));
		this.hamburgerFix(false);
		// console.log('closing...');
	},
	updateTransformOrigin: function () {
		scrollTop = this.$window.scrollTop();
		equation = (scrollTop + this.offset) / this.pageHeight * 100;
		this.$paperFront.css('transform-origin', 'center ' + equation + '%');
	},
	hamburgerFix: function (opening) {
		if (opening) {
			$('.hamburger').css({
				position: 'absolute',
				top: this.$window.scrollTop() + 30 + 'px'
			});
		} else {
			setTimeout(function () {
				$('.hamburger').css({
					position: 'fixed',
					top: '30px'
				});
			}, 300);
		}
	},
	bindEvents: function () {
		this.$hamburger.on('click', this.open.bind(this));
		$('.close').on('click', this.close.bind(this));
		this.$window.on('scroll', this.updateTransformOrigin.bind(this));
	},
	init: function () {
		this.bindEvents();
		this.updateTransformOrigin();
	}
};
paperMenu.init();
</script>
</body>
</html>

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代码(styles.css):

body{font-family:'Architects Daughter',sans-serif;}
#paper-back{width:100%;height:100vh;background-color:#243040;position:fixed;top:0;left:0;font-size:33px;}
#paper-back nav{padding:120px 34px;}
#paper-back nav a{display:block;margin-bottom:25px;text-decoration:none;color:rgba(255,255,255,0.7);}
#paper-window{height:100vh;width:100vw;position:relative;overflow-x:hidden;overflow-y:scroll;z-index:2;}
#paper-window.tilt{overflow:hidden;pointer-events:none;}
#paper-window.tilt #paper-front{-webkit-transform:rotate(10deg) translateZ(0);transform:rotate(10deg) translateZ(0);}
#paper-front{pointer-events:auto;position:relative;z-index:3;background-color:white;box-shadow:0 0 20px rgba(0,0,0,0.7);-webkit-transform-origin:center 70%;-ms-transform-origin:center 70%;transform-origin:center 70%;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}
#container section{height:600px;text-align:center;}
#container section:first-of-type{padding-top:10vh;}
#container section:first-of-type h1{font-size:45px;}
#container section:first-of-type p{font-size:25px;}
@media (max-width:600px){#container section:first-of-type{padding-top:15vh;}
#container section:first-of-type h1{font-size:30px;}
#container section:first-of-type p{font-size:18px;}
}
#container section:nth-of-type(2n){background-color:#edf1f5;}
.hamburger{position:fixed;z-index:4;top:30px;left:30px;width:45px;height:34px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.hamburger span{position:relative;}
.hamburger span,.hamburger span:before,.hamburger span:after{display:block;width:45px;height:6px;background-color:#243040;border-radius:2px;}
.hamburger span:before,.hamburger span:after{content:'';position:absolute;}
.hamburger span:before{bottom:-14px;}
.hamburger span:after{bottom:-28px;}
.close{position:fixed;top:30px;left:30px;width:45px;height:34px;cursor:pointer;}
.close-z-index{z-index:10;}
.close:before,.close:after{content:'';position:absolute;display:block;width:45px;height:6px;top:50%;background-color:white;border-radius:2px;}
.close:before{-webkit-transform:translateY(-50%) rotate(45deg);-ms-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg);}
.close:after{-webkit-transform:translateY(-50%) rotate(-45deg);-ms-transform:translateY(-50%) rotate(-45deg);transform:translateY(-50%) rotate(-45deg);}

附件:下载该文件资源,减少时间成本(增值服务)