"nav"
Bootstrap 3.0.0 Snippet by evarevirus

<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/mikel301292/pen/dMYRYZ?depth=everything&order=popularity&page=33&q=translate&show_forks=false" /> <style class="cp-pen-styles"> body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color:#26394E ; } #menu { height: 100%; position: fixed; background-color: #FED057; width: 300px; transition: 1000ms all cubic-bezier(0.19, 1, 0.22, 1); transform: translateX(-100%); left: 60px; } #menu.expanded { transform: translateX(0%); left: 0px; } .menu-inner { width: 100%; height: 100%; position: relative; } #blob { top: 0; z-index: -1; right: 60px; transform: translateX(100%); height: 100%; position: absolute; } #blob-path { height: 100%; fill: #FED057; } .hamburger { right: 20px; position: absolute; width: 20px; height: 20px; margin-top: -10px; } .hamburger .line { width: 100%; height: 4px; background-color: #fff; position: absolute; } .hamburger .line:nth-child(2) { top: 50%; margin-top: -2px; } .hamburger .line:nth-child(3) { bottom: 0; } h1 { position: fixed; right: 0; margin: 0; } ul { padding: 0; list-style: none; width: 80%; margin-left: 10%; position: absolute; top: 10px; } ul li { color: #fff; font-family: sans-serif; padding: 20px 0; } h2 { position: absolute; left: 50%; color: #fff; margin: 0; font-size: 16px; font-family: sans-serif; font-weight: 100; } </style></head><body> <div id="menu"> <div class="hamburger"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <div class="menu-inner"> <ul> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> </ul> </div> <svg version="1.1" id="blob"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path id="blob-path" d="M60,500H0V0h60c0,0,20,172,20,250S60,900,60,500z"/> </svg> </div> <h2> hover close to the menu </h2> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >$(window).load(function(){ var height = window.innerHeight, x= 0, y= height/2, curveX = 10, curveY = 0, targetX = 0, xitteration = 0, yitteration = 0, menuExpanded = false; blob = $('#blob'), blobPath = $('#blob-path'), hamburger = $('.hamburger'); $(this).on('mousemove', function(e){ x = e.pageX; y = e.pageY; }); $('.hamburger, .menu-inner').on('mouseenter', function(){ $(this).parent().addClass('expanded'); menuExpanded = true; }); $('.menu-inner').on('mouseleave', function(){ menuExpanded = false; $(this).parent().removeClass('expanded'); }); function easeOutExpo(currentIteration, startValue, changeInValue, totalIterations) { return changeInValue * (-Math.pow(2, -10 * currentIteration / totalIterations) + 1) + startValue; } var hoverZone = 150; var expandAmount = 20; function svgCurve() { if ((curveX > x-1) && (curveX < x+1)) { xitteration = 0; } else { if (menuExpanded) { targetX = 0; } else { xitteration = 0; if (x > hoverZone) { targetX = 0; } else { targetX = -(((60+expandAmount)/100)*(x-hoverZone)); } } xitteration++; } if ((curveY > y-1) && (curveY < y+1)) { yitteration = 0; } else { yitteration = 0; yitteration++; } curveX = easeOutExpo(xitteration, curveX, targetX-curveX, 100); curveY = easeOutExpo(yitteration, curveY, y-curveY, 100); var anchorDistance = 200; var curviness = anchorDistance - 40; var newCurve2 = "M60,"+height+"H0V0h60v"+(curveY-anchorDistance)+"c0,"+curviness+","+curveX+","+curviness+","+curveX+","+anchorDistance+"S60,"+(curveY)+",60,"+(curveY+(anchorDistance*2))+"V"+height+"z"; blobPath.attr('d', newCurve2); blob.width(curveX+60); hamburger.css('transform', 'translate('+curveX+'px, '+curveY+'px)'); $('h2').css('transform', 'translateY('+curveY+'px)'); window.requestAnimationFrame(svgCurve); } window.requestAnimationFrame(svgCurve); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: