Skip to content

Instantly share code, notes, and snippets.

@sivartravis

sivartravis/gooey-menu-css-only.markdown

Forked from anonymous/gooey-menu-css-only.markdown
Created March 10, 2017 15:58
Show Gist options
  • Save sivartravis/9b3d2981646b01f6b7ff5ca69ade22f4 to your computer and use it in GitHub Desktop.
Save sivartravis/9b3d2981646b01f6b7ff5ca69ade22f4 to your computer and use it in GitHub Desktop.
Download ZIP
Gooey Menu - CSS Only
Raw
gooey-menu-css-only.markdown

Gooey Menu - CSS Only

Gooey Menu animation is done purely with css.

The inspiration comes from Soheil's post on Material Up called "Material In a Liquid State".

A Pen by Matthew Sechrest on CodePen.

License.

Raw
index.html
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="ms-nav-container">
<ul class="ms-nav">
<input type="checkbox" id="ms-menu" class="ms-menu-toggle" name="ms-menu-toggle" />
<div class="bg-change"></div>
<li class="ms-li ms-li3 ms-li-last">
<a href="javascript:void(0)">
<span class="fa fa-search"></span>
</a>
</li>
<li class="ms-li ms-li2">
<a href="javascript:void(0)">
<span class="fa fa-flask"></span>
</a>
</li>
<li class="ms-li ms-li1 ms-li-first">
<a href="javascript:void(0)">
<span class="fa fa-fort-awesome"></span>
</a>
</li>
<li class="ms-main">
<a href="javascript:void(0)">
<label class="ms-menu-toggle-lbl" for="ms-menu">
<span class="fa fa-plus"></span>
</label>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Raw
style.css
body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
background: #29313e;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
outline: none !important;
}
.ms-nav-container {
position: relative;
width: 100%;
height: 100vh;
}
#ms-menu {
display: none;
}
.bg-change {
position: absolute;
bottom: -75px;
right: -90px;
width: 1px;
height: 1px;
border-radius: 100% 0% 0% 0%;
background: #2D394D;
transition: all .25s ease;
}
.ms-nav .ms-menu-toggle:checked ~ .bg-change {
width: 3000px;
height: 3000px;
transition: all .5s ease;
}
.ms-nav {
position: absolute;
bottom: 75px;
right: 75px;
}
.ms-nav > .ms-main {
position: relative;
}
.ms-nav > .ms-li {
position: absolute;
bottom: 0;
right: 8px;
transition: bottom .5s ease;
z-index: 1;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li a {
box-shadow: 0px 5px 10px #333333;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li1 {
bottom: 150%;
transition: bottom .5s ease;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li1 a span {
opacity: 1;
transition: opacity .5s ease .1s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-main:after {
animation: big-border-bottom-animation .5s ease .1s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li1:before {
animation: border-top-animation .5s ease .2s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li1:after {
animation: border-bottom-animation .5s ease .2s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li2 {
bottom: 265%;
transition: bottom .6s ease;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li2 a span {
opacity: 1;
transition: opacity .6s ease .2s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li2:before {
animation: border-top-animation .5s ease .2s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li2:after {
animation: border-bottom-animation .5s ease .3s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li3 {
bottom: 380%;
transition: bottom .7s ease;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li3 a span {
opacity: 1;
transition: opacity .7s ease .3s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li3:before {
animation: border-top-animation .5s ease .3s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li3:after {
animation: border-bottom-animation .5s ease .4s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li4 {
bottom: 495%;
transition: bottom .8s ease;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li4 a span {
opacity: 1;
transition: opacity .8s ease .4s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li4:before {
animation: border-top-animation .5s ease .4s;
}
.ms-nav .ms-menu-toggle ~ .ms-li:before {
content: '';
width: 45px;
display: block;
position: absolute;
bottom: -5px;
left: 0;
right: 0;
margin: auto;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 0px solid #337ab7;
}
.ms-nav .ms-menu-toggle ~ .ms-li:before {
content: '';
width: 45px;
display: block;
position: absolute;
bottom: -5px;
left: 0;
right: 0;
margin: auto;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 0px solid #337ab7;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li:before {
content: '';
width: 45px;
display: block;
position: absolute;
bottom: 0px;
left: 0;
right: 0;
margin: auto;
border-left: 24px solid transparent;
border-right: 24px solid transparent;
border-top: 25px solid #337ab7;
z-index: 11;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li:after {
content: '';
width: 45px;
display: block;
position: absolute;
top: 0px;
left: 0;
right: 0;
margin: auto;
border-left: 24px solid transparent;
border-right: 24px solid transparent;
border-bottom: 25px solid #337ab7;
transition: border-bottom .3s ease;
z-index: 11;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-main:after {
content: '';
width: 60px;
display: block;
position: absolute;
top: 0px;
left: 0;
right: 0;
margin: auto;
border-left: 24px solid transparent;
border-right: 24px solid transparent;
border-bottom: 45px solid #337ab7;
transition: border-bottom .3s ease;
z-index: 11;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li-last:after {
content: '';
width: 45px;
display: block;
position: absolute;
top: -5px;
left: 0;
right: 0;
margin: auto;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
border-bottom: 0px solid #337ab7;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-main span {
transform: rotate(-45deg);
transition: transform .35s ease;
}
.ms-nav .ms-menu-toggle ~ .ms-main span {
transition: transform .35s ease;
opacity: 1;
}
.ms-nav > .ms-main > a {
box-shadow: 0px 5px 10px #333333;
}
.ms-nav > li a {
font-size: 30px;
color: #FFFFFF;
background: #337ab7;
width: 60px;
height: 60px;
display: block;
border-radius: 100%;
position: relative;
text-align: center;
}
.ms-nav > .ms-main a,
.ms-nav > .ms-main > a > label {
font-size: 30px;
color: #FFFFFF;
background: #337ab7;
width: 75px;
height: 75px;
display: block;
border-radius: 100%;
position: relative;
text-align: center;
z-index: 19;
}
.ms-nav > li > a span {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: 30px;
width: 30px;
opacity: 0;
z-index: 12;
}
@keyframes border-top-animation {
0% {
bottom: 0px;
}
50% {
bottom: -14px;
}
100% {
bottom: 0px;
}
}
@keyframes border-bottom-animation {
0% {
top: 0px;
}
50% {
top: -13px;
}
100% {
top: 0px;
}
}
@keyframes big-border-bottom-animation {
0% {
top: 0px;
}
50% {
top: -30px;
}
100% {
top: 0px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment