Skip to content

Instantly share code, notes, and snippets.

/Bounce-Menu.markdown

Created March 6, 2014 04:11
Show Gist options
  • Save anonymous/9382258 to your computer and use it in GitHub Desktop.
Save anonymous/9382258 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Matt Hoiland.
Raw
index.html
<div class="device">
<div class="screen">
<div class="menu">
<ul>
<li class="lock"><a href="">Lock</a></li>
<li class="share"><a href="">Share</a></li>
<li class="download"><a href="">Download</a></li>
</ul>
</div>
<div class="toggle">
<div class="x"></div>
<div class="y"></div>
</div>
<div class="content"></div>
</div>
</div>
<div class="circle"></div>
<script src="http://code.jquery.com/jquery-latest.min.js">
Raw
script.js
/* Define Click Event for Mobile */
if( 'ontouchstart' in window ){ var click = 'touchstart'; }
else { var click = 'click'; }
/* Click menu toggle */
$('div.toggle').on(click, function(){
if( flag ){
if( !$(this).hasClass('minus') ){ openMenu(); }
else { closeMenu(); }
}
});
/* Click menu icons */
$('div.menu ul li a').on(click, function(e){
e.preventDefault();
closeMenu();
});
/* Open/ Close Menu Functions */
var flag = true; // Prevent menu change while animating
function openMenu(){
flag = false;
// Remove circle
$('div.circle').remove();
// Update toggle
$('div.toggle').addClass('minus');
$('div.y').addClass('minus');
setTimeout(function(){ $('div.x').addClass('stretch'); }, 100);
setTimeout(function(){ $('div.x').removeClass('stretch'); }, 300);
// Move content
$('div.content').addClass('bounce');
setTimeout(function(){ $('div.content').removeClass('bounce').addClass('open'); }, 250);
// Animate menu icons
$('div.menu ul li').addClass('animate');
$('div.menu ul li').addClass('move');
setTimeout(function(){ $('div.menu ul li').addClass('color'); }, 200);
setTimeout(function(){ flag = true; }, 400);
}
function closeMenu(){
flag = false;
// Update toggle
$('div.toggle').removeClass('minus');
$('div.y').removeClass('minus');
$('div.x').addClass('shrink');
setTimeout(function(){ $('div.x').removeClass('shrink'); }, 200);
// Move content
$('div.content').removeClass('open');
// Reset menu icons
setTimeout(function(){
$('div.menu ul li').removeClass('animate');
$('div.menu ul li').removeClass('color move');
flag = true;
}, 300);
}
Raw
style.css
/* Reset & General */
* { margin: 0px; padding: 0px; }
body {
background: #2e2c35;
width: 100%; height: 100%;
}
a.codepen {
display: block;
height: 43px; width: 150px;
background: url('http://creativeda.sh/sandbox/bounce_menu/img/codepen.png');
text-indent: -9999px; font-size: 0px;
position: absolute;
top: 50%; left: 50%;
z-index: 200;
margin: 420px 0px 0px -72px;
}
div.circle {
height: 77px; width: 77px;
background: url('http://creativeda.sh/sandbox/bounce_menu/img/circle.png');
position: absolute;
top: 50%; left: 50%;
z-index: 1000;
margin: 164px 0px 0px -168px;
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; }
}
/* Device & Screen */
div.device {
height: 798px; width: 378px;
width: 440px; height: 807px;
background: url('http://creativeda.sh/sandbox/bounce_menu/img/iphone_black.png') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute; margin: auto;
top: 0px; bottom: 100px; left: 0px; right: 0px;
}
div.screen {
height: 568px; width: 320px;
position: absolute;
top: 119px; left: 60px;
overflow: hidden;
}
div.content {
height: 568px; width: 320px;
background: #375585;
position: absolute;
top: 0px; left: 0px;
z-index: 300;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
div.content.bounce {
-webkit-transform: translate3d(70px, -65px, 0px);
-moz-transform: translate3d(70px, -65px, 0px);
-o-transform: translate3d(70px, -65px, 0px);
transform: translate3d(70px, -65px, 0px);
}
div.content.open {
-webkit-transform: translate3d(60px, -55px, 0px);
-moz-transform: translate3d(60px, -55px, 0px);
-o-transform: translate3d(60px, -55px, 0px);
transform: translate3d(60px, -55px, 0px);
}
/* Toggle & Menu */
div.toggle {
height: 30px; width: 40px;
position: absolute;
bottom: 15px; left: 10px;
z-index: 500;
cursor: pointer;
}
div.x,
div.y {
position: absolute; margin: auto;
top: 0px; bottom: 0px;
left: 0px; right: 0px;
background: #fff;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
div.x { height: 4px; width: 30px; }
div.y { height: 30px; width: 4px; }
div.x.stretch { width: 40px; }
div.x.shrink { width: 15px; }
div.y.minus { height: 0px; }
div.menu {
background: #222;
height: 568px; width: 320px;
position: absolute;
top: 0px; left: 0px;
z-index: 100;
}
div.menu ul {
list-style: none;
padding: 0px; margin: 0px;
height: 150px;
width: 35px;
position: absolute;
bottom: 60px; left: 11px;
}
div.menu ul li {
margin-top: 15px;
}
div.menu ul li a {
display: block;
height: 31px; width: 31px;
text-indent: -9999px; font-size: 0px;
background: #375585 center center;
}
div.menu ul li.animate a {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
div.menu ul li.lock a {
background-image: url('http://creativeda.sh/sandbox/bounce_menu/img/icon_lock.png');
-webkit-transform: translate3d(-50px, -30px, 0px);
-moz-transform: translate3d(-50px, -30px, 0px);
-o-transform: translate3d(-50px, -30px, 0px);
transform: translate3d(-50px, -30px, 0px);
}
div.menu ul li.share a {
background-image: url('http://creativeda.sh/sandbox/bounce_menu/img/icon_share.png');
-webkit-transform: translate3d(-50px, 0px, 0px);
-moz-transform: translate3d(-50px, 0px, 0px);
-o-transform: translate3d(-50px, 0px, 0px);
transform: translate3d(-50px, 0px, 0px);
}
div.menu ul li.download a {
background-image: url('http://creativeda.sh/sandbox/bounce_menu/img/icon_download.png');
-webkit-transform: translate3d(-50px, 30px, 0px);
-moz-transform: translate3d(-50px, 30px, 0px);
-o-transform: translate3d(-50px, 30px, 0px);
transform: translate3d(-50px, 30px, 0px);
}
div.menu ul li.color a { background-color: #fff; }
div.menu ul li.move a {
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment