SOURCE

$('#btn').click(function() {
	$('body').toggleClass('NavOn');
	$(this).toggleClass('animate');
});
$('#content').bind("touchstart",function(){
	$('body').removeClass('NavOn');
	$('#btn').removeClass('animate');
});
$('#content').fullpage();
$('#nextpage').on('click', $('#content').fullpage.moveSectionDown);

<div id="wrap">
	<div id="btn"><div class="bar"></div></div>
	<div id="nav">
		<div class="bg"></div>
		<div class="portrait">
			<a href="#"><img src="http://img5.duitang.com/uploads/item/201611/10/20161110015750_icGrW.jpeg" alt=""></a>
			<span>Demo</span>
		</div>
		<ul class="menu">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Board</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	<div id="content">
		<div class="section bg1"></div>
		<div class="section bg2"></div>
		<div class="section bg3"></div>
		<div class="section bg4"></div>
	</div>
	<a href="javascript:;" id="nextpage"><i class="chevron"></i><i class="chevron"></i><i class="chevron"></i></a>
</div>

html, body, div, dl, dt, dd, ul, ol, li, p, h1, h2 ,h3, h4, h5, h6, a { padding: 0; margin: 0; text-decoration: none; list-style: none; }
#wrap { height: 100%; }

#nav { position: fixed; width: 255px; background: url('http://pic2116.ytqmx.com:82/2017/0926/27/2.jpg%21960.jpg'); background-size: cover; height: 100%; }
#nav .bg { position: absolute; width: 255px; height: 100%; background: inherit; filter: blur(5px); }
#nav .portrait { position: relative; padding: 70px 20px 0 20px; text-align: center; width: 215px; }
#nav .portrait img { width: 100px; height: 100px; border-radius: 100%; border: rgba(255, 255, 255, 0.3) 5px solid; }
#nav .portrait span { display: block; padding: 10px 50px; color: #fff; font-size: 20px; text-decoration: underline; }
#nav .menu { position: relative; padding: 20px; width: 215px; }
#nav .menu > li { border-bottom: #eee 1px solid; }
#nav .menu > li > a { font-size: 15px; color: #fff; padding: 12px 15px; display: block; }
#nav .menu > li > a:hover { background: rgba(255, 255, 255, 0.2); }


#btn { position: fixed; left: 20px; top: 20px; width: 30px; height: 25px; display: block; z-index: 1; cursor: pointer; }
#btn .bar,
#btn .bar:after,
#btn .bar:before { width: 30px; height: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
#btn .bar { position: relative; transform: translateY(10px); background: white; transition: all 0ms 300ms; }
#btn .bar:before { content: ""; position: absolute; left: 0; bottom: 10px; background: white; transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
#btn .bar:after { content: ""; position: absolute; left: 0; top: 10px; background: white; transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
#btn.animate .bar { background: rgba(255, 255, 255, 0); box-shadow: none; }
#btn.animate .bar:after { top: 0; transform: rotate(45deg); transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); }
#btn.animate .bar:before { bottom: 0; transform: rotate(-45deg); transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); }


.fp-viewing-3 #nextpage { display: none; }
.NavOn #nextpage { display: none; }
#nextpage { position: fixed; bottom: 0; left: calc(50% - 12px); width: 24px; height: 50px; }
#nextpage i { position: absolute; width: 24px; height: 3px; opacity: 0; transform: scale3d(0.5, 0.5, 0.5); animation: move 3s ease-out infinite; }
#nextpage i:first-child { animation: move 3s ease-out 1s infinite; }
#nextpage i:nth-child(2) { animation: move 3s ease-out 2s infinite; }
#nextpage i:before,
#nextpage i:after { content: ' '; position: absolute; top: 0; height: 100%; width: 51%; background: rgba(136, 136, 136, 0.4); }
#nextpage i:before { left: 0; transform: skew(0deg, 30deg); }
#nextpage i:after { right: 0; width: 50%; transform: skew(0deg, -30deg); }
@keyframes move {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 1;
    transform: translateY(20px);
  }
  67% {
    opacity: 1;
    transform: translateY(28px);
  }
  100% {
    opacity: 0;
    transform: translateY(40px) scale3d(0.5, 0.5, 0.5);
  }
}








#content { transition: .5s transform; }
.NavOn #content { transform: translateX(255px) !important; }
#content img { max-width: 100%; }



.bg1 { background: url('http://pic1.win4000.com/wallpaper/3/5937babab28c1.jpg') no-repeat center; background-size: cover; }
.bg2 { background: url('http://pic1.win4000.com/wallpaper/e/546f0c55ec0d9.jpg') no-repeat center; background-size: cover; }
.bg3 { background: url('http://pic1.win4000.com/wallpaper/7/56f241222c70a.jpg') no-repeat center; background-size: cover; }
.bg4 { background: url('http://pic1.win4000.com/wallpaper/3/57b3f86675cff.jpg') no-repeat center; background-size: cover; }