Skip to content

Instantly share code, notes, and snippets.

@SindhujaD

SindhujaD/Social-App-Menu.markdown

Created January 16, 2014 02:41
Show Gist options
  • Save SindhujaD/8448946 to your computer and use it in GitHub Desktop.
Save SindhujaD/8448946 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Matt Hoiland.
Raw
index.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>
Raw
script.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();
});
Raw
Social-App-Menu.markdown
Raw
style.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment