<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 ----------> <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>

/* 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; }

$(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(); })(); });