Gooey Menu: Using CSS and SVG Filters

byThamz -

 Introduction

In this tutorial, we will create a Gooey Menu effect using HTML and CSS. This unique and visually appealing menu is achieved through SVG filters and CSS transitions. The Gooey Menu creates a fluid and interactive user experience. The menu items spread out from a central point and create a gooey, elastic-like effect when activated.

HTML Structure

Let's start by setting up the HTML structure for our Gooey Menu. We have a title, subtitle, and menu items.

  
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gooey Menu: Using CSS and SVG Filters</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <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>

</body>
</html>
CSS Styling
Next, let's add the CSS styles to create the Gooey Menu effect. We use SVG filters for the gooey effect and CSS transitions for the interactive animations.
  
    @import "compass/css3";

//vars
$fg:#ff4081;
$bg:#3f51b5;
$pi:3.14;

//config
$menu-items:5;
$open-distance:115px;
$opening-angle:$pi - .2;

body{
  background:$bg;
  color:white;
  text-align:center;
}
a{
  color:inherit;
}
h1, h2, h3, h4{
  margin:0;
  margin-bottom:10px;
  margin-top:10px;
}
h1{
  font-size:3em;
}
%goo{
  filter:url('#shadowed-goo');
  // debug 
  // background:rgba(255,0,0,0.2);
}
%ball{
  background:$fg;
  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;
}
.menu-item{
  @extend %ball;
}
.hamburger{
  $width:25px;
  $height:3px;
  width:$width;
  height:$height;
  background:white;
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-$width/2;
  margin-top:-$height/2;
  transition:transform 200ms;
}
$hamburger-spacing:8px;
.hamburger-1{
  transform:translate3d(0,-$hamburger-spacing,0);
}
.hamburger-2{
  transform:translate3d(0,0,0);
}
.hamburger-3{
  transform:translate3d(0,$hamburger-spacing,0);
}
.menu-open:checked+.menu-open-button{
  .hamburger-1{
    transform:translate3d(0,0,0) rotate(45deg); 
  }
  .hamburger-2{
    transform:translate3d(0,0,0) scale(0.1,1);
  }
  .hamburger-3{
    transform:translate3d(0,0,0) rotate(-45deg); 
  }
}
.menu{
  @extend %goo;
  $width:380px;
  $height:250px;
  position:absolute;
  left:50%;
  margin-left:-$width/2;
  padding-top:20px;
  padding-left:$width/2;
  width:$width;
  height:$height;
  box-sizing:border-box;
  font-size:20px;
  text-align:left;
}


.menu-item{
  &:hover{
    background:white;
    color:$fg;
  }
  @for $i from 1 through $menu-items{
    &:nth-child(#{$i+2}){
      transition-duration:10ms+(60ms*($i));
    }
  }
}

.menu-open-button{
  @extend %ball;
  z-index:2;
  transition-timing-function:cubic-bezier(0.175, 0.885, 0.320, 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.000, 0.340, 1.330);
  @for $i from 1 through $menu-items{
    $angle:(($pi - $opening-angle)/2)+(($opening-angle/($menu-items - 1))*($i - 1));
    
    &:nth-child(#{$i+2}){
      transition-duration:80ms+(80ms*$i);
      transform:translate3d(cos($angle)*$open-distance,sin($angle)*$open-distance,0);
    }
  }
}
Conclusion
In this tutorial, we introduced you to the Gooey Menu effect using HTML and CSS. The Gooey Menu is a fun and creative way to present navigation options on your website. By combining SVG filters and CSS transitions, we achieved a visually appealing and interactive menu. You can further customize the styles and animations to fit your website's design and theme. Happy coding!

Posting Komentar

Lebih baru Lebih lama

Formulir Kontak