<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 ----------> <h1>Click the button below to override autoplay</h1> <nav class="item-menu"> <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/> <label id="menu-open-handler" class="menu-open-button" for="menu-open"> <span class="plus plus-1"></span> <span class="plus plus-2"></span> </label> <div class="real-menu"> <a href="#" class="menu-item" data-name="File"> <i class="fa fa-file"></i> </a> <a href="#" class="menu-item" data-name="Photo"> <i class="fa fa-image"></i> </a> <a href="#" class="menu-item" data-name="Video"> <i class="fa fa-video-camera"></i> </a> <a href="#" class="menu-item" data-name="Snippet"> <i class="fa fa-code"></i> </a> <a href="#" class="menu-item" data-name="Folder"> <i class="fa fa-folder"></i> </a> </div> </nav> <!-- filters --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 0; height: 0;"> <defs> <filter id="shadowed-goo"> <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /> <feGaussianBlur in="goo" stdDeviation="3" result="shadow" /> <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2" result="shadow" /> <feOffset in="shadow" dx="1" dy="1" result="shadow" /> <feBlend in2="shadow" in="goo" result="goo" /> <feBlend in2="goo" in="SourceGraphic" result="mix" /> </filter> <filter id="goo"> <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /> <feBlend in2="goo" in="SourceGraphic" result="mix" /> </filter> </defs> </svg> <div class="inspiration">Inspired from <a href="https://codepen.io/lbebber/pen/pvwZJp" target="_blank">a pen</a> by <a href="https://codepen.io/lbebber" target="_blank">Lucas Bebber</a></div> <script> var checkbox = document.getElementById('menu-open'); var handler = document.getElementById('menu-open-handler'); var toggleInterval = setInterval(function(){ checkbox.checked = !checkbox.checked; }, 2000); handler.onclick = function(){ clearInterval(toggleInterval); }; </script>

body { background: #FFFFFF; color: #585858; font-family: 'Exo 2', sans-serif; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; } h1 { font-weight: 300; padding-top: 20px; margin: 20px 0; } .inspiration { position: absolute; bottom: 10px; right: 10px; font-style: oblique; } .item-menu { padding-top: 20px; height: 250px; box-sizing: border-box; font-size: 20px; text-align: center; -webkit-filter: url("#shadowed-goo"); filter: url("#shadowed-goo"); } .item-menu .real-menu { -webkit-transform: translate3d(0, -65px, 0); transform: translate3d(0, -65px, 0); -webkit-transition: -webkit-transform ease-out 200ms; transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms; } .item-menu .menu-item { background: #12CC66; border-radius: 100%; width: 80px; height: 80px; color: white; text-align: center; line-height: 80px; -webkit-transition: -webkit-transform ease-out 200ms; transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms; display: inline-block; position: relative; } .item-menu .menu-open-button { background: #12CC66; border-radius: 100%; width: 80px; height: 80px; color: white; text-align: center; line-height: 80px; -webkit-transition: -webkit-transform ease-out 200ms; transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms; display: inline-block; position: relative; width: 40px; height: 40px; } .item-menu .menu-open { display: none; } .item-menu .plus { width: 18px; height: 2px; background: white; display: block; position: absolute; top: 50%; left: 50%; margin-left: -9px; margin-top: -1px; -webkit-transition: -webkit-transform 200ms; transition: -webkit-transform 200ms; transition: transform 200ms; transition: transform 200ms, -webkit-transform 200ms; } .item-menu .plus.plus-1 { -webkit-transform: rotate(90deg) translate3d(0, 0, 0); transform: rotate(90deg) translate3d(0, 0, 0); } .item-menu .plus.plus-2 { -webkit-transform: rotate(0) translate3d(0, 0, 0); transform: rotate(0) translate3d(0, 0, 0); } .item-menu .menu-item:hover { background: white; color: #12CC66; } .item-menu .menu-item:nth-child(1) { -webkit-transition-duration: 70ms; transition-duration: 70ms; -webkit-transform: translate3d(171px, 0, 0) scale(0.5); transform: translate3d(171px, 0, 0) scale(0.5); } .item-menu .menu-item:nth-child(2) { -webkit-transition-duration: 130ms; transition-duration: 130ms; -webkit-transform: translate3d(85.5px, 0, 0) scale(0.5); transform: translate3d(85.5px, 0, 0) scale(0.5); } .item-menu .menu-item:nth-child(3) { -webkit-transition-duration: 190ms; transition-duration: 190ms; -webkit-transform: translate3d(0, 0, 0) scale(0.5); transform: translate3d(0, 0, 0) scale(0.5); } .item-menu .menu-item:nth-child(4) { -webkit-transition-duration: 130ms; transition-duration: 130ms; -webkit-transform: translate3d(-85.5px, 0, 0) scale(0.5); transform: translate3d(-85.5px, 0, 0) scale(0.5); } .item-menu .menu-item:nth-child(5) { -webkit-transition-duration: 70ms; transition-duration: 70ms; -webkit-transform: translate3d(-171px, 0, 0) scale(0.5); transform: translate3d(-171px, 0, 0) scale(0.5); } .item-menu .menu-item:after { content: attr(data-name); position: absolute; font-size: 14px; font-weight: 500; color: #12CC66; line-height: 40px; left: 50%; white-space: nowrap; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); display: none; } .item-menu .menu-open-button { z-index: 2; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition-duration: 400ms; transition-duration: 400ms; -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0); transform: scale(1.1, 1.1) translate3d(0, 0, 0); cursor: pointer; } .item-menu .menu-open-button:hover { -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0); transform: scale(1.2, 1.2) translate3d(0, 0, 0); } .item-menu .menu-open:checked + .menu-open-button { -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-duration: 200ms; transition-duration: 200ms; -webkit-transform: scale(1, 1) rotate(-45deg) translate3d(0, 0, 0); transform: scale(1, 1) rotate(-45deg) translate3d(0, 0, 0); } .item-menu .menu-open:checked ~ .real-menu { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } .item-menu .menu-open:checked ~ .real-menu .menu-item { -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .item-menu .menu-open:checked ~ .real-menu .menu-item:nth-child(1) { -webkit-transition-duration: 320ms; transition-duration: 320ms; } .item-menu .menu-open:checked ~ .real-menu .menu-item:nth-child(2) { -webkit-transition-duration: 240ms; transition-duration: 240ms; } .item-menu .menu-open:checked ~ .real-menu .menu-item:nth-child(3) { -webkit-transition-duration: 160ms; transition-duration: 160ms; } .item-menu .menu-open:checked ~ .real-menu .menu-item:nth-child(4) { -webkit-transition-duration: 240ms; transition-duration: 240ms; } .item-menu .menu-open:checked ~ .real-menu .menu-item:nth-child(5) { -webkit-transition-duration: 320ms; transition-duration: 320ms; } .item-menu .menu-open:checked ~ .real-menu .menu-item:after { display: block; }