Skip to content

Instantly share code, notes, and snippets.

/gooey-menu-css-only.markdown

Created March 10, 2017 15:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/ba586c2c604b82ad96027cd20032aad2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/ba586c2c604b82ad96027cd20032aad2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Mar 10, 2017.
    10 changes: 10 additions & 0 deletions gooey-menu-css-only.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    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](http://codepen.io/codemonkeyco/pen/JXrOdG) by [Matthew Sechrest](http://codepen.io/codemonkeyco) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/codemonkeyco/pen/JXrOdG/license).
    34 changes: 34 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    <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>
    282 changes: 282 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,282 @@
    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;
    }
    }