<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/nikita333/pen/yOKXYo?depth=everything&order=popularity&page=7&q=statistics&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto'>
<style class="cp-pen-styles">.clearfix:after {
content: '';
display: block;
clear: both;
}
body {
font-family: Roboto, sans-serif;
background: #F6C390;
}
a {
text-decoration: none;
}
.device-wrapper {
border: 1px solid transparent;
}
.device {
position: relative;
margin: 10px auto;
width: 320px;
height: 534px;
background: #57385C;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px #E7B787;
}
.menu {
position: absolute;
z-index: 1;
width: 100%;
height: 272px;
overflow: hidden;
}
.menu-bg {
position: absolute;
top: 24px;
left: 24px;
z-index: 1;
width: 24px;
height: 24px;
background: rgba(0, 0, 0, 0.1);
border-radius: 50%;
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
-webkit-transform: scale(0);
transform: scale(0);
}
.menu-bg-show {
-webkit-transform: scale(32);
transform: scale(32);
}
.menu-icon {
position: absolute;
top: 26px;
left: 20px;
z-index: 2;
width: 17px;
height: 17px;
cursor: pointer;
}
.menu-icon-top {
position: absolute;
top: 0;
left: 0;
width: 17px;
height: 2px;
background: #EC7263;
-webkit-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.menu-icon-top-hide {
opacity: 0;
-webkit-transform: translate(100px, 65px) scale(2);
transform: translate(100px, 65px) scale(2);
}
.menu-icon-middle {
position: absolute;
top: 7px;
left: 0;
width: 11px;
height: 2px;
background: #EC7263;
-webkit-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.menu-icon-middle-hide {
opacity: 0;
-webkit-transform: translate(100px, 105px) scale(2);
transform: translate(100px, 105px) scale(2);
}
.menu-icon-bottom {
position: absolute;
bottom: 0;
left: 0;
width: 17px;
height: 2px;
background: #EC7263;
-webkit-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.menu-icon-bottom-hide {
opacity: 0;
-webkit-transform: translate(100px, 145px) scale(2);
transform: translate(100px, 145px) scale(2);
}
.menu-icon-cross-top {
position: absolute;
top: 0;
width: 19px;
height: 2px;
background: #EC7263;
-webkit-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
-webkit-transform: translate(-2px, 7px) rotate(45deg) scale(0);
transform: translate(-2px, 7px) rotate(45deg) scale(0);
}
.menu-icon-cross-top-show {
-webkit-transform: translate(-2px, 7px) rotate(45deg) scale(1);
transform: translate(-2px, 7px) rotate(45deg) scale(1);
}
.menu-icon-cross-bottom {
position: absolute;
bottom: 0;
width: 19px;
height: 2px;
background: #EC7263;
-webkit-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
-webkit-transform: translate(-2px, -8px) rotate(-45deg) scale(0);
transform: translate(-2px, -8px) rotate(-45deg) scale(0);
}
.menu-icon-cross-bottom-show {
-webkit-transform: translate(-2px, -8px) rotate(-45deg) scale(1);
transform: translate(-2px, -8px) rotate(-45deg) scale(1);
}
.menu-list {
position: relative;
z-index: 2;
margin: 68px 0 0;
opacity: 0;
-webkit-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
-webkit-transform: translate(-99px, -114px) scale(0.15, 0.15);
transform: translate(-99px, -114px) scale(0.15, 0.15);
}
.menu-list-show {
opacity: 1;
-webkit-transform: translate(0) scale(1);
transform: translate(0) scale(1);
}
.menu-link {
display: block;
padding: 15px 0 15px 72px;
font-size: 14px;
text-transform: uppercase;
color: #EC7263;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
.menu-link:hover {
background: #5C3F61;
}
.content {
position: relative;
height: 100%;
}
.overlay {
position: absolute;
top: 209px;
right: 0;
z-index: 20;
width: 100%;
height: 263px;
background: rgba(0, 0, 0, 0.25);
opacity: 0;
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
.overlay-show {
opacity: 1;
}
.avatar {
z-index: 11;
margin: 63px auto 0;
width: 72px;
height: 72px;
background: #EC7263;
border-radius: 50%;
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
.avatar-hide {
-webkit-transform: translate(0, 240px);
transform: translate(0, 240px);
}
.name {
margin: 25px auto 0;
width: 135px;
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
.name-hide {
-webkit-transform: translate(0, 240px);
transform: translate(0, 240px);
}
.name p {
height: 10px;
background: #C06162;
border-radius: 8px;
}
.name p:first-child {
float: left;
width: 46px;
}
.name p:last-child {
float: right;
width: 80px;
}
.cards {
position: relative;
margin: 41px 0 0;
}
.card-left {
position: absolute;
top: 46px;
left: 22px;
width: 40px;
height: 212px;
background: #9D567C;
border-radius: 2px;
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
.card-left-hide {
-webkit-transform: translate(0, 240px);
transform: translate(0, 240px);
}
.card-middle {
position: absolute;
left: 50%;
z-index: 1;
width: 208px;
height: 304px;
background: #FEBE7E;
border-radius: 2px;
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.card-middle-hide {
-webkit-transform: translate(-50%, 240px);
transform: translate(-50%, 240px);
}
.card-right {
position: absolute;
top: 46px;
right: 22px;
width: 40px;
height: 212px;
background: #958C6B;
border-radius: 2px;
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
.card-right-hide {
-webkit-transform: translate(0, 240px);
transform: translate(0, 240px);
}
</style></head><body>
<div class="device-wrapper">
<div class="device">
<div class="menu">
<div class="menu-icon">
<div class="menu-icon-top"></div>
<div class="menu-icon-middle"></div>
<div class="menu-icon-bottom"></div>
<div class="menu-icon-cross-top"></div>
<div class="menu-icon-cross-bottom"></div>
</div>
<ul class="menu-list">
<li class="menu-item"><a class="menu-link" href="#">Dashboard</a></li>
<li class="menu-item"><a class="menu-link" href="#">History</a></li>
<li class="menu-item"><a class="menu-link" href="#">Statistics</a></li>
<li class="menu-item"><a class="menu-link" href="#">Settings</a></li>
</ul>
<div class="menu-bg"></div>
</div>
<div class="content">
<div class="overlay"></div>
<div class="avatar"></div>
<div class="name clearfix">
<p></p>
<p></p>
</div>
<div class="cards">
<div class="card-middle"></div>
<div class="card-left"></div>
<div class="card-right"></div>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script >//inspiration https://dribbble.com/shots/2293621-Hamburger-Menu-Animation
$(window).load(function() {
//menu part
var $menuIcon = $('.menu-icon');
var $menuHamburger = $('.menu-icon-top').add('.menu-icon-middle').add('.menu-icon-bottom');
var $menuCrossTop = $('.menu-icon-cross-top');
var $menuCrossBottom = $('.menu-icon-cross-bottom');
var $menu = $('.menu');
var $menuBg = $('.menu-bg');
var $menuList = $('.menu-list');
//content part
var $overlay = $('.overlay');
var $contentParts = $('.avatar').add('.name').add('.card-middle').add('.card-left').add('.card-right');
var $contentPartsReverse = $($contentParts.get().reverse());
//delays
var delayForNextElement;
var sumDelays = 0;
$menuIcon.click(function() {
if (!$menu.hasClass('menu-active')) {
//reset delays sum
sumDelays = 0;
//menu part
$menu.addClass('menu-active');
$menuHamburger.each(function() {
var $this = $(this);
var currentClass = $this.attr('class');
$this.addClass(currentClass + '-hide');
});
$menuCrossTop.addClass('menu-icon-cross-top-show');
$menuCrossBottom.addClass('menu-icon-cross-bottom-show');
$menuBg.addClass('menu-bg-show');
$menuList.addClass('menu-list-show');
//content part
$overlay.addClass('overlay-show');
//adding classes in reverse order
$contentPartsReverse.each(function(i) {
var $this = $(this);
//find a space symbol position in string
var spacePos = $this.attr('class').indexOf(' ');
//find a first class
var firstClass;
if ( spacePos == -1 ) {
firstClass = $this.attr('class');
} else {
firstClass = $this.attr('class').slice(0, spacePos);
}
//animation delay
if (firstClass == 'card-left' || firstClass == 'card-right') {
delayForNextElement = 0;
} else {
delayForNextElement = 20 * (-1 + i);
sumDelays += delayForNextElement;
}
setTimeout(function() {
$this.addClass(firstClass + '-hide');
}, delayForNextElement);
});
} else {
//reset delays sum
sumDelays = 0;
//menu part
$menu.removeClass('menu-active');
$menuHamburger.each(function() {
var $this = $(this);
var spacePos = $this.attr('class').indexOf(' ');
var neededClass = $this.attr('class').slice(spacePos);
$this.removeClass(neededClass);
});
$menuCrossTop.removeClass('menu-icon-cross-top-show');
$menuCrossBottom.removeClass('menu-icon-cross-bottom-show');
$menuBg.removeClass('menu-bg-show');
$menuList.removeClass('menu-list-show');
//content part
$overlay.removeClass('overlay-show');
//removing classes in normal order
$contentParts.each(function(i) {
var $this = $(this);
//find a space symbol position in string
var spacePos = $this.attr('class').indexOf(' ');
//find a first class
var firstClass;
if ( spacePos == -1 ) {
firstClass = $this.attr('class');
} else {
firstClass = $this.attr('class').slice(0, spacePos);
}
//animation delay
if (firstClass == 'card-left' || firstClass == 'card-right') {
delayForNextElement = sumDelays;
} else {
delayForNextElement = 20 * (0 + i);
sumDelays += delayForNextElement;
}
setTimeout(function() {
$this.removeClass(firstClass + '-hide');
}, delayForNextElement);
});
}
});
});
//# sourceURL=pen.js
</script>
</body></html>
