<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/virgilpana/pen/MYZYGP?limit=all&page=32&q=svg" />
<style class="cp-pen-styles">/* Reset & General
---------------------------------------------------------------------- */
* { margin: 0px; padding: 0px; }
body {
background: #26272c;
font-family: "Open Sans", sans-serif;
}
.screen{
margin: 50px auto 120px;
width:480px;
height:8526px;
position:relative;
background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/screen1.png") 0 0 no-repeat;
}
.screen a {
width:480px;
height:852px;
}
figure {
position: relative;
overflow: hidden;
width:480px;
height:852px;
}
svg {
position: absolute;
top: -1px; /* fixes rendering issue in FF */
top:0;
left:0;
}
path{
fill: #fff;
}
#more{
position: absolute;
top: 796px;
left: 417px;
z-index: 2;
cursor:pointer;
}
#menu-items{
position: absolute;
top: 506px;
left: 51px;
z-index: 2;
width: 219px;
opacity:0;
}
#menu-items.animate{
position: absolute;
top: 529px;
left: 57px;
z-index: 2;
width: 187px;
opacity:1;
-webkit-transition: all 200ms elastic;
-moz-transition: all 200ms elastic;
-o-transition: all 200ms elastic;
transition: all 200ms elastic;
}
#menu-items.animate-back{
position: absolute;
top: 545px;
left: 96px;
z-index: 2;
width: 166px;
opacity:0;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out1;
}
#close{
position:absolute;
display:none;
top: 786px;
right: 28px;
width:30px;
height:30px;
cursor:pointer;
}
.cx, .cy{
background:#596b72;
position:absolute;
width:0px;
top:15px;
right:15px;
height:2px;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.cx.s1, .cy.s1{
right:0;
width:35px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.cy.s2{
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.cy.s3{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.cx.s1{
right:0;
width:35px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.cx.s2{
-ms-transform: rotate(140deg);
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.cx.s3{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 100ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}</style></head><body>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/snap.svg-min.js"></script>
<section class="screen clearfix">
<a href="#" id="menu" data-path-hover="M251,422c135.4,0,239.7,50,239.7,50v393.3H-10.8V472
C-10.8,472,109.9,422,251,422L251,422z M251,422L251,422c135.4,0,239.7,50,239.7,50 M251,422C248.6,424.4,251,422,251,422 M251,422
C248.6,424.4,251,422,251,422 M251,422C248.6,424.4,251,422,251,422" data-path-hover2="M251,472c135.4,0,239.7,0,239.7,0v393.3H-10.8V472
C-10.8,472,109.9,472,251,472L251,472z M251,472L251,472c135.4,0,239.7,0,239.7,0 M251,472C248.6,474.4,251,472,251,472 M251,472
C248.6,474.4,251,472,251,472 M251,472C248.6,474.4,251,472,251,472">
<figure>
<svg viewBox="0 0 480 852" preserveAspectRatio="none"><path id="open" d="M434.7,771.3c16,0,28.9,13,28.9,28.9s-13,28.9-28.9,28.9
s-28.9-13-28.9-28.9S418.8,771.3,434.7,771.3z"/>
</figure>
</a>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/more.png" id="more" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/menu-items.png" id="menu-items" />
<div id="close">
<div class="cy"></div>
<div class="cx"></div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >$(document).ready(function(){
(function() {
function init() {
var speed = 250,
easing = mina.backout;
[].slice.call ( document.querySelectorAll( '.screen > a' ) ).forEach( function( el ) {
var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
pathConfig = {
from : path.attr( 'd' ),
to : el.getAttribute( 'data-path-hover' ),
to2: el.getAttribute( 'data-path-hover2' )
};
$('#more, #open').click(function() {
path.animate( { 'path' : pathConfig.to }, 150, mina.easeIn );
$('#more').fadeOut("fast");
setTimeout(function(){$('#menu-items').addClass('animate'); }, 100);
setTimeout(function(){
path.animate( { 'path' : pathConfig.to2 }, 230, mina.elastic );
$('#close').show();
$('.cx, .cy').addClass('s1');
setTimeout(function(){$('.cx, .cy').addClass('s2');}, 100);
setTimeout(function(){$('.cx, .cy').addClass('s3');}, 200);
}, 150);
} );
$("#close").click(function() {
path.animate( { 'path' : pathConfig.from }, speed, mina.easeout );
$('#menu-items').removeClass('animate').addClass('animate-back');
$('.cx, .cy').removeClass('s1 s2 s3');
$('#more').fadeIn(400);
setTimeout(function(){
$('#menu-items').removeClass('animate-back');
$('#close').hide();
}, 400);
} );
} );
}
init();
})();
});
//# sourceURL=pen.js
</script>
</body></html>
