Creative gooey effects menu design with free source code. sticky responsive menu bootstrap. we are use gooey animation with bootstrap 4. In this gooey effects we use social icon. this is new best cool menu effect. gooey effects menu icon usign pure css. sticky responsive menu bootstrap 4.

We allows to free snippets of gooey menu css , you can download full code of gooey menu android layout. Here in this post i will give you example of sticky responsive menu bootstrap snippet and you will get simple code of html, css and jquery. In creative gooey effects snippet i give you three tab with html, css and js, you can easily get code of bootstrap 4 sticky menu layout.


<!doctype html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet"> <link rel="stylesheet" href="custom.css"> </head> <body class="bg-dark"> <div class="container"> <div class="row mt-5"> <div class="col-md-12 col-12 rounded"> <nav class="social-menu"> <input type="checkbox" href="#" class="social-menu-open" name="social-menu-open" id="social-menu-open"/> <label class="social-menu-open-button" for="social-menu-open"> <span class="hamburger hamburger-1"></span> <span class="hamburger hamburger-2"></span> <span class="hamburger hamburger-3"></span> </label> <a href="#" class="social-menu-item"> <i class="fa fa-facebook"></i> </a> <a href="#" class="social-menu-item"> <i class="fa fa-twitter"></i> </a> <a href="#" class="social-menu-item"> <i class="fa fa-pinterest"></i> </a> <a href="#" class="social-menu-item"> <i class="fa fa-google"></i> </a> <a href="#" class="social-menu-item"> <i class="fa fa-cog"></i> </a> </nav> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <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> </svg> </div> </div> </div> </body> </html>
body { margin-top: 150px; } .social-menu { filter: url("#shadowed-goo"); -webkit-filter: url("#shadowed-goo"); } .social-menu-item, .social-menu-open-button { background: #00AAA0; border-radius: 100%; width: 80px; height: 80px; margin-left: -40px; position: absolute; top: 20px; color: white; text-align: center; line-height: 80px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms; } .social-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: -webkit-transform 200ms; transition: transform 200ms; transition: transform 200ms, -webkit-transform 200ms; } .hamburger-1 { -webkit-transform: translate3d(0, -8px, 0); transform: translate3d(0, -8px, 0); } .hamburger-2 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .hamburger-3 { -webkit-transform: translate3d(0, 8px, 0); transform: translate3d(0, 8px, 0); } .social-menu-open:checked + .social-menu-open-button .hamburger-1 { -webkit-transform: translate3d(0, 0, 0) rotate(45deg); transform: translate3d(0, 0, 0) rotate(45deg); } .social-menu-open:checked + .social-menu-open-button .hamburger-2 { -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1); transform: translate3d(0, 0, 0) scale(0.1, 1); } .social-menu-open:checked + .social-menu-open-button .hamburger-3 { -webkit-transform: translate3d(0, 0, 0) rotate(-45deg); transform: translate3d(0, 0, 0) rotate(-45deg); } .social-menu { position: absolute; left: 50%; margin-left: -190px; padding-top: 20px; padding-left: 190px; width: 380px; height: 250px; box-sizing: border-box; font-size: 25px; text-align: left; } .social-menu-item:hover { background: #fff; color: #00AAA0; } .social-menu-item:nth-child(3) { transition-duration: 70ms; } .social-menu-item:nth-child(4) { transition-duration: 130ms; } .social-menu-item:nth-child(5) { transition-duration: 190ms; } .social-menu-item:nth-child(6) { transition-duration: 250ms; } .social-menu-item:nth-child(7) { transition-duration: 310ms; } .social-menu-open-button { z-index: 2; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); 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; } .social-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); } .social-menu-open:checked + .social-menu-open-button { transition-timing-function: linear; transition-duration: 200ms; -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0); transform: scale(0.8, 0.8) translate3d(0, 0, 0); } .social-menu-open:checked ~ .social-menu-item { transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); } .social-menu-open:checked ~ .social-menu-item:nth-child(3) { transition-duration: 160ms; -webkit-transform: translate3d(114.42548px, 11.48084px, 0); transform: translate3d(114.42548px, 11.48084px, 0); } .social-menu-open:checked ~ .social-menu-item:nth-child(4) { transition-duration: 240ms; -webkit-transform: translate3d(77.18543px, 85.2491px, 0); transform: translate3d(77.18543px, 85.2491px, 0); } .social-menu-open:checked ~ .social-menu-item:nth-child(5) { transition-duration: 320ms; -webkit-transform: translate3d(0.09158px, 114.99996px, 0); transform: translate3d(0.09158px, 114.99996px, 0); } .social-menu-open:checked ~ .social-menu-item:nth-child(6) { transition-duration: 400ms; -webkit-transform: translate3d(-77.04956px, 85.37192px, 0); transform: translate3d(-77.04956px, 85.37192px, 0); } .social-menu-open:checked ~ .social-menu-item:nth-child(7) { transition-duration: 480ms; -webkit-transform: translate3d(-114.40705px, 11.66307px, 0); transform: translate3d(-114.40705px, 11.66307px, 0); }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post