Bouncing burger menu

I need to realize burger menu with bouncing metaball effect or water drop (name it what as you want) something like that.

I don't need all effect's from there I need only this water drop effect with explanations.

Here's my code.

As you see there is nothing incomprehensible here.

Simple jQuery with toggle method CSS with some mediaqueries for small screen show or hide burger ..

$(".menu-trigger").click(function() {
    $(this).toggleClass('active');
    $("ul.menu li").slideToggle('fast');
})

body {
  background: lightblue !important;
  height: 1000px;
}

.header {
  height: 57px;
  background-color: #fff;
  -webkit-filter: url("#goo");
  filter: url("#goo");
}
.header h1 {
  margin: 0;
  margin-left: 60px;
}
.header h1 a {
  float: left;
  line-height: 1.5;
  width: auto;
  height: 57px;
}
.header h1 a img {
  width: 90px;
  height: 57px;
}
.header .menu-trigger {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ddd;
  position: fixed;
  top: 10px;
  right: 30px;
  z-index: 50;
}
.header .menu-trigger span {
  top: 50%;
  left: 50%;
  -webkit-transition: background-color 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.header .menu-trigger span:after {
  top: 6px;
  -webkit-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
.header .menu-trigger span:before {
  top: -6px;
  -webkit-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
.header nav {
  width: 60%;
  margin: 0 auto;
}
.header nav .menu {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  text-decoration: none;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  list-style-type: none;
  margin: 0;
  height: 57px;
  line-height: 3.5;
}
.header nav .menu li a {
  text-decoration: none;
}

.active span {
  background-color: transparent !important;
  -webkit-transition: background-color 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
}
.active span:after {
  top: -1px !important;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
.active span:before {
  top: -1px !important;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.header .menu-trigger span, .header .menu-trigger span:after, .header .menu-trigger span:before {
  width: 20px;
  height: 2px;
  background-color: #aaa;
  position: absolute;
  content: '';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
  <div class="menu-trigger">
    <span></span>
  </div>
  <h1 class="logo clearfix"><a href="#">Brand</a></h1>
  <nav>
    <ul class="menu">
      <li>
        <a href="#">One</a>
      </li>
      <li>
        <a href="#">Two</a>
      </li>
      <li>
        <a href="#">Three</a>
      </li>
      <li>
        <a href="#">Four</a>
      </li>
      <li>
        <a href="#">Five</a>
      </li>
      <li>
        <a href="#">Six</a>
      </li>
    </ul>
  </nav>
</header>

 <svg>
    <defs>
        <filter id="goo"> 
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/> 
                <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 -8" result="goo"/> 
                <feBlend in="SourceGraphic" in2="goo"/> 
        </filter>
    </defs>
</svg>

from Bouncing burger menu