<h1>Gooey Menu</h1>
<h2>Using CSS and SVG Filters</h2>
<h3>By <a href="https://codepen.io/lbebber">Lucas Bebber</a></h3>
<h4>Version 1 - <a href="https://codepen.io/lbebber/pen/RNgBPP" target="_blank">Version 2</a> - <a href="https://codepen.io/lbebber/pen/pvwZJp" target="_blank">Version 3</a> - <a href="https://codepen.io/lbebber/pen/rawQKR" target="_blank">Version 4</a></h4>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-cog"></i> </a>
</nav>
<!-- filters -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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>
@import "compass/css3";
body {
background: #3f51b5;
color: white;
text-align: center;
}
a {
color: inherit;
}
h1, h2, h3, h4 {
margin: 0;
margin-bottom: 10px;
margin-top: 10px;
}
h1 {
font-size: 3em;
}
.menu {
filter: url('#shadowed-goo');
}
.menu-item, .menu-open-button {
background: #ff4081;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
top: 20px;
color: white;
text-align: center;
line-height: 80px;
transform: translate3d(0, 0, 0);
transition: transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
transition: transform 200ms;
}
.hamburger-1 {
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 50%;
margin-left: -190px;
padding-top: 20px;
padding-left: 190px;
width: 380px;
height: 250px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
}
.menu-item:hover {
background: white;
color: #ff4081;
}
.menu-item:nth-child(3) {
transition-duration: 70ms;
}
.menu-item:nth-child(4) {
transition-duration: 130ms;
}
.menu-item:nth-child(5) {
transition-duration: 190ms;
}
.menu-item:nth-child(6) {
transition-duration: 250ms;
}
.menu-item:nth-child(7) {
transition-duration: 310ms;
}
.menu-open-button {
z-index: 2;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-duration: 400ms;
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
transition-timing-function: linear;
transition-duration: 200ms;
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
transition-duration: 160ms;
transform: translate3d(cos(0.1)*115px, sin(0.1)*115px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
transition-duration: 240ms;
transform: translate3d(cos(0.835)*115px, sin(0.835)*115px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
transition-duration: 320ms;
transform: translate3d(cos(1.57)*115px, sin(1.57)*115px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
transition-duration: 400ms;
transform: translate3d(cos(2.305)*115px, sin(2.305)*115px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
transition-duration: 480ms;
transform: translate3d(cos(3.04)*115px, sin(3.04)*115px, 0);
}