<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 ----------> <div class="wrapper"> <div id="menu"><p>Menu</p></div> <div id="about"><p>About</p></div> <div id="projects"><p>Projects</p></div> </div> <script> (function () { "use strict"; var menu = document.getElementById('menu'), about = document.getElementById('about'), projects = document.getElementById('projects'); menu.onmousedown = function () { menu.className = ''; about.className = ''; projects.className = ''; }; menu.onclick = function () { if (about.style.left === "370px") { about.style.left = "205px"; projects.style.left = "205px"; menu.className = 'animone'; about.className = 'animtwo'; projects.className = 'animtwo'; } else { about.style.left = "370px"; projects.style.left = "50px"; menu.className = 'animone'; about.className = 'animtwo'; projects.className = 'animtwo'; } }; })(); </script>

html, body { width: 100%; height: 100%; margin: 0; padding: 0; background: #909191; transform: translate3D(0, 0, 0); } p { margin: 0; padding: 0; font-family: ‘Arial Narrow’, sans-serif; color: #333333; text-shadow: 0 1px #fff; } .wrapper { position: relative; margin: 0 auto; width: 500px; height: 100%; } #menu { position: relative; top: 60px; width: 100px; height: 100px; margin: 0 auto; text-align: center; border-radius: 100px; background: linear-gradient(#fff 0%, #bfc1c1 100%); box-shadow: 0 10px 3px -6px #777; cursor: pointer; z-index: 1; } #menu p { font-size: 16px; line-height: 105px; letter-spacing: 1px; } #about, #projects { position: absolute; top: 70px; left: 200px; width: 80px; height: 80px; text-align: center; border-radius: 80px; background: linear-gradient(#fff 0%, #bfc1c1 100%); box-shadow: 0 10px 6px -6px #777; } #about, #projects p { font-size: 12px; line-height: 85px; letter-spacing: 1px; } .animone { animation: bounce 0.7s ease-in-out; } .animtwo { animation: bounce 0.8s ease-in-out; transition: 0.4s ease; } @keyframes bounce { 0% { transform: scale(1.0); } 10% { transform: scale(1.2); } 20% { transform: scale(1.3); } 30% { transform: scale(1.2); } 40% { transform: scale(1.0); } 50% { transform: scale(1.1); } 60% { transform: scale(1.0); } 70% { transform: scale(1.05);} 80% { transform: scale(1.0); } 90% { transform: scale(1.02);} 100% { transform: scale(1.0); } }