CodePen

HTML

            
              <html>
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

	<div class="background">
		<div class="circle"></div>
		<div class="iphone">
			<div class="screen">
				<div class="menu">
					<ul>
						<li><a href="">Home</a></li>
						<li><a href="">What's New</a></li>
						<li><a href="">Popular</a></li>
						<li><a href="">Activity</a></li>
						<li><a href="">Chat</a></li>
						<li><a href="">Around Me</a></li>
						<li><a href="">Help Center</a></li>
						<li><a href="">Logout</a></li>
					</ul>
				</div>
				<div class="status"></div>
				<div class="content ">
					<div class="button"></div>
				</div>
			</div>
		</div>
	</div>

	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="menu.js"></script>
</body>
</html>
            
          
!
via HTML Inspector

CSS

            
              /*	Basic Reset and General */
	* { 
		margin: 0px; 
		padding: 0px; 
	}
	html, body {
		min-width: 435px;
		min-height: 1000px;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
	div.background {
		position: absolute;
		top: 0px; left: 0px;
		min-width: 435px;
		min-height: 1000px;
		height: 100%; width: 100%;
		background: #408dce url('http://creativeda.sh/sandbox/social_menu/img/background.jpg') no-repeat center center; 
		-webkit-background-size: cover;
		   -moz-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
	}

	div.circle {
		height: 77px; width: 77px;
		background: url('http://creativeda.sh/sandbox/social_menu/img/circle.png');
		position: absolute;
		top: 50%; left: 50%;
		z-index: 200;
		margin: -328px 0px 0px -180px;	
		pointer-events: none;
		animation: pulse 5s infinite;
		-webkit-animation: pulse 1.5s infinite; 
		opacity: 0;
	}
		@keyframes pulse {
			0%   { opacity: 0; }
			50%  { opacity: 1; }
			100% { opacity: 0; }
		}
		@-webkit-keyframes pulse {
			0%   { opacity: 0; }
			50%  { opacity: 1; }
			100% { opacity: 0; }
		}
		



/*	The Device */

	div.iphone {
		height: 810px; width: 435px; 
		position: absolute;
		margin: auto;
		top: 0px; bottom: 80px; left: 0px; right: 0px;
		background: url('http://creativeda.sh/sandbox/social_menu/img/iphone.png') no-repeat center center; 
		-webkit-background-size: cover;
		   -moz-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
	}
	div.screen {
		height: 568px; width: 320px;
		position: absolute;
		top: 119px; left: 59px;
		overflow: hidden;
		position: relative;
	}


/*	Content */
	div.menu {
		position: absolute;
		height: 100%; width: 100%;
		background: url('http://creativeda.sh/sandbox/social_menu/img/blur.jpg') no-repeat center center; 
		-webkit-background-size: cover;
		   -moz-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
	}
		div.menu ul { 
			width: 600px;
			list-style: none; 
			margin: 95px 0px 0px 75px;
		}
		div.menu li {
			font-family: 'HelveticaNeue-UltraLight', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', sans-serif; 
			font-weight: 200;
			font-size: 19px;
			line-height: 19px;
			margin-bottom: 28px;
			
			-webkit-transition: all 400ms ease-in-out, opacity 1000ms ease;
			   -moz-transition: all 400ms ease-in-out, opacity 1000ms ease;
			    -ms-transition: all 400ms ease-in-out, opacity 1000ms ease;
			     -o-transition: all 400ms ease-in-out, opacity 1000ms ease;
			        transition: all 400ms ease-in-out, opacity 1000ms ease;
			-webkit-transform: translate3d(-150px, 0px, 0px) scale(0.2);
			opacity: 0;
		}
		div.menu li.visible {
			-webkit-transform: translate3d(0px, 0px, 0px) scale(1);
			opacity: 1;
		}
		div.menu li a {
			color: rgba(255,255,255,0.9);
			text-decoration: none;
		}
		
	div.status {
		position: absolute;
		top: 0px; left: 0px;
		z-index: 200;
		height: 20px; width: 100%;
		background: url('http://creativeda.sh/sandbox/social_menu/img/status_black.png') no-repeat center center; 
		-webkit-background-size: cover;
		   -moz-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
	}
	div.status.active {
		background-image: url('http://creativeda.sh/sandbox/social_menu/img/status_white.png'); 
	}
	
	div.content {
		position: absolute;
		top: 0px; left: 0px;
		height: 568px; width: 320px;
		background: #fff url('http://creativeda.sh/sandbox/social_menu/img/screen.jpg') no-repeat center center; 
		-webkit-background-size: cover;
		   -moz-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
		-webkit-transition: all 300ms ease-in-out;
		   -moz-transition: all 300ms ease-in-out;
		    -ms-transition: all 300ms ease-in-out;
		     -o-transition: all 300ms ease-in-out;
		        transition: all 300ms ease-in-out;
		-webkit-backface-visibility: hidden;
	}
		div.content.inactive {
			cursor: pointer;
			-webkit-transform: translate3d(160px, 0px, 0px) scale(0.5);
			   -moz-transform: translate3d(160px, 0px, 0px) scale(0.5);
			    -ms-transform: translate3d(160px, 0px, 0px) scale(0.5);
			        transform: translate3d(160px, 0px, 0px) scale(0.5);
		}
	
	
		div.button {
			width: 30px; height: 30px;
			position: absolute;
			top: 23px; left: 3px;
			cursor: pointer;
		}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
/*	Define Click Event for Mobile */
	if( 'ontouchstart' in window ){ var click = 'touchstart'; }
	else { var click = 'click'; }



	
	/*	Reveal Menu */
	$('div.button').on(click, function(){
		if( !$('div.content').hasClass('inactive') ){
			// Remove circle
			$('div.circle').remove();
		
			// Slide and scale content
			$('div.content').addClass('inactive');
			setTimeout(function(){ $('div.content').addClass('flag'); }, 100);
			
			// Change status bar
			$('div.status').fadeOut(100, function(){
				$(this).toggleClass('active').fadeIn(300);
			});
			
			// Slide in menu links
			var timer = 0;
			$.each($('li'), function(i,v){
				timer = 40 * i;
				setTimeout(function(){
					$(v).addClass('visible');
				}, timer);
			});
		}
	});
	
	

	/*	Close Menu */
	function closeMenu() {		
		// Slide and scale content
		$('div.content').removeClass('inactive flag');
		
		// Change status bar
		$('div.status').fadeOut(100, function(){
			$(this).toggleClass('active').fadeIn(300);
		});
		
		// Reset menu
		setTimeout(function(){
			$('li').removeClass('visible');
		}, 300);
	}
	
	$('div.content').on(click, function(){
		if( $('div.content').hasClass('flag') ){
			closeMenu();
		}
	});
	$('li a').on(click, function(e){
		e.preventDefault();
		closeMenu();
	});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................