Gooey menu with CSS and SVG filters. Version 4
A Pen by David Norris on CodePen.
Created
September 3, 2019 21:39
-
-
Save djnorrisdev/1c87b8baf2c893e4ae7f8cb84f53a046 to your computer and use it in GitHub Desktop.
CSS Gooey Menu (Version 4)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Gooey Menu</h1> | |
| <h2>Using CSS and SVG Filters</h2> | |
| <h3>By <a href="https://codepen.io/lbebber">Lucas Bebber</a></h3> | |
| <h4><a href="https://codepen.io/lbebber/pen/LELBEo" target="_blank">Version 1</a> - <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> - Version 4</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> | |
| </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" /> | |
| <feComposite in2="shadow" in="goo" result="goo" /> | |
| <feComposite 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" /> | |
| <feComposite in2="goo" in="SourceGraphic" result="mix" /> | |
| </filter> | |
| </defs> | |
| </svg> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background: #009688; | |
| 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-open-button, .menu-item { | |
| background: #ffc107; | |
| 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: -80px; | |
| padding-top: 20px; | |
| padding-left: 80px; | |
| width: 650px; | |
| height: 150px; | |
| box-sizing: border-box; | |
| font-size: 20px; | |
| text-align: left; | |
| } | |
| .menu-item:hover { | |
| background: white; | |
| color: #ffc107; | |
| } | |
| .menu-item:nth-child(3) { | |
| transition-duration: 180ms; | |
| } | |
| .menu-item:nth-child(4) { | |
| transition-duration: 180ms; | |
| } | |
| .menu-item:nth-child(5) { | |
| transition-duration: 180ms; | |
| } | |
| .menu-item:nth-child(6) { | |
| transition-duration: 180ms; | |
| } | |
| .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.165, 0.84, 0.44, 1); | |
| } | |
| .menu-open:checked ~ .menu-item:nth-child(3) { | |
| transition-duration: 170ms; | |
| transform: translate3d(80px, 0, 0); | |
| } | |
| .menu-open:checked ~ .menu-item:nth-child(4) { | |
| transition-duration: 250ms; | |
| transform: translate3d(160px, 0, 0); | |
| } | |
| .menu-open:checked ~ .menu-item:nth-child(5) { | |
| transition-duration: 330ms; | |
| transform: translate3d(240px, 0, 0); | |
| } | |
| .menu-open:checked ~ .menu-item:nth-child(6) { | |
| transition-duration: 410ms; | |
| transform: translate3d(320px, 0, 0); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment