<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="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="menu.js"></script>
</body>
</html>/* Basic Reset and General */
* {
margin: 0px;
padding: 0px;
}
html, body {
min-width: 435px;
min-height: 1000px;
touch-callout: none;
user-select: none;
user-select: none;
user-select: none;
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('https://hoidrop.s3-us-west-2.amazonaws.com/cp_social_app_background.jpg') no-repeat center center;
background-size: cover;
background-size: cover;
background-size: cover;
background-size: cover;
}
div.circle {
height: 77px; width: 77px;
background: url('https://hoidrop.s3-us-west-2.amazonaws.com/cp_social_app_circle.png');
position: absolute;
top: 50%; left: 50%;
z-index: 200;
margin: -328px 0px 0px -180px;
pointer-events: none;
animation: pulse 5s infinite;
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('https://hoidrop.s3-us-west-2.amazonaws.com/cp_social_app_iphone.png') no-repeat center center;
background-size: cover;
background-size: cover;
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('https://hoidrop.s3-us-west-2.amazonaws.com/cp_social_app_blur.jpg') no-repeat center center;
background-size: cover;
background-size: cover;
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;
transition: all 400ms ease-in-out, opacity 1000ms ease;
transition: all 400ms ease-in-out, opacity 1000ms ease;
transition: all 400ms ease-in-out, opacity 1000ms ease;
transition: all 400ms ease-in-out, opacity 1000ms ease;
transition: all 400ms ease-in-out, opacity 1000ms ease;
transform: translate3d(-150px, 0px, 0px) scale(0.2);
opacity: 0;
}
div.menu li.visible {
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('https://hoidrop.s3-us-west-2.amazonaws.com/cp_social_app_status_black.png') no-repeat center center;
background-size: cover;
background-size: cover;
background-size: cover;
background-size: cover;
}
div.status.active {
background-image: url('https://hoidrop.s3-us-west-2.amazonaws.com/cp_social_app_status_white.png');
}
div.content {
position: absolute;
top: 0px; left: 0px;
height: 568px; width: 320px;
background: #fff url('https://hoidrop.s3-us-west-2.amazonaws.com/cp_social_app_screen.jpg') no-repeat center center;
background-size: cover;
background-size: cover;
background-size: cover;
background-size: cover;
transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
backface-visibility: hidden;
}
div.content.inactive {
cursor: pointer;
transform: translate3d(160px, 0px, 0px) scale(0.5);
transform: translate3d(160px, 0px, 0px) scale(0.5);
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;
}
/* 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();
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.