Edit in JSFiddle

<div class="bar">

<a class="logo magick-click" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">HSK.WiKi</a>
 
<form role="text" method="get" id="searchform" action="<?php echo home_url( '/' ) ?>" >

<div class="searchicon">
    <input type="search" name="s" id="s" placeholder=" "  readonly onfocus="this.removeAttribute('readonly')" />
    <div>
        <svg>
            <use xlink:href="#path">
        </svg>
    </div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 28" id="path">
        <path d="M32.9418651,-20.6880772 C37.9418651,-20.6880772 40.9418651,-16.6880772 40.9418651,-12.6880772 C40.9418651,-8.68807717 37.9418651,-4.68807717 32.9418651,-4.68807717 C27.9418651,-4.68807717 24.9418651,-8.68807717 24.9418651,-12.6880772 C24.9418651,-16.6880772 27.9418651,-20.6880772 32.9418651,-20.6880772 L32.9418651,-29.870624 C32.9418651,-30.3676803 33.3448089,-30.770624 33.8418651,-30.770624 C34.08056,-30.770624 34.3094785,-30.6758029 34.4782612,-30.5070201 L141.371843,76.386562" transform="translate(83.156854, 22.171573) rotate(-225.000000) translate(-83.156854, -22.171573)"></path>
    </symbol>
</svg>
</form>


    
<div class="menuwrap">
<nav class="menunav">
  <a href="#" class="nav__link"><span class="magick-click">Home</span></a>
  <a href="#" class="nav__link magick-click">About</a>
  <a href="#" class="nav__link">Shop</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
  <a href="#" class="nav__link">Contact</a>
</nav>

<div class="hamburger">
  <span class="hamburger__patty"></span>
  <span class="hamburger__patty"></span>
  <span class="hamburger__patty"></span>
</div>

</div>


</div>


<!-- Необходимо для работы скрипта с плавающими кнопка -->
<div id="mouse"></div>


<script>
// Убирает автозаполнение поиска:
$('.searchicon input').attr("autocomplete", "off");


// Анимация пузырьков

var animateButton = function(e) {

  e.preventDefault;
  //reset animation
  e.target.classList.remove('animate');
  
  e.target.classList.add('animate');
  setTimeout(function(){
    e.target.classList.remove('animate');
  },700);
};

var bubblyButtons = document.getElementsByClassName("magick-click");

for (var i = 0; i < bubblyButtons.length; i++) {
  bubblyButtons[i].addEventListener('click', animateButton, false);
} 

// Поиск всплывающего меню:
var nav = $('.menunav');
var toggle = $('.hamburger');
var navItems = $('.nav__link');

toggle.click(function (){
	toggleNav();
});

function toggleNav() {
  
  // Show Nav
  nav.toggleClass('menuactive');
  
  // Transform Hamburger into 'X'
  toggle.toggleClass('menuactive');
  
  // Show Nav Items
  navItems.toggleClass('menuactive');
}

$(document).mouseup(function (e) {
    var container = $(".menuwrap");
    if (container.has(e.target).length === 0){
        $('.menunav').removeClass("menuactive");
        $('.hamburger').removeClass("menuactive");
        $('.nav__link').removeClass("menuactive");
    }
});

 
 // Прыгающий текст
 
 if ( $(window).width() > 739) {
const data = {
  'elems': document.querySelectorAll('.magick-click'),
  'mouse': document.getElementById('mouse'),
  'colors': ['rgb(66,133,244)', 'rgb(219,68,55)', 'rgb(244,160,0)', 'rgb(15,157,88)'],
  'lis': [],
  'scaleVal': 1,
  'maxScale': 10,
  'bigger': false,
  'mouseOpac': 1,
  'edge': 20,
  'mx': innerWidth/2,
  'my': innerHeight/2,
  'mEase': 0.3,
  'pointer': {x: innerWidth/2, y: innerHeight/2}
}

class Control {
  constructor(thedata) {
    for (let k in thedata) {
      this[k] = data[k];
    }
  }
  set pointerVal(valObj) {
    this.pointer.x = valObj.x;
    this.pointer.y = valObj.y;
  }
  set mouseColor(color) {
    this.mouse.style.backgroundColor = color;
  }
  get mouseVal() {
    return {x: this.mx, y: this.my}
  }
  static transform(tar, x, y, sval) {
    tar.style.transform = `translate(${x}px,${y}px) scale(${sval})`;
  }
  static getDist(x1, y1, x2, y2) {
    return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
  }
  init() {
    for (let i = 0; i < this.elems.length; i++) {
      this.lis.push(new Lis(this.elems[i], this.colors[i]));
      this.lis[i].init();
      this.lis[i].el.addEventListener('click', () => {
        this.mouse.classList.toggle('click');
        setTimeout(() => {
          this.mouse.classList.remove('click');
        }, 1000);
      });
    }
  }
  render() {
    this.mx += (this.pointer.x - this.mx)*this.mEase;
    this.my += (this.pointer.y - this.my)*this.mEase;
    if (this.mx <= this.edge || this.mx >= innerWidth - this.edge || 
        this.my <= this.edge || this.my >= innerHeight - this.edge) {
      this.mouseOpac += (-this.mouseOpac)*0.2;
    } else {
      this.mouseOpac += (1 - this.mouseOpac)*0.2;
    }
    for (let i = 0; i < this.lis.length; i++) {
      let dist = Control.getDist(this.mx, this.my,
                                   this.lis[i].center.x, 
                                   this.lis[i].center.y);
      if (dist < this.lis[i].r) {
        this.bigger = true;
        break;
      } else {
        this.bigger = false;
        this.mouseColor = 'blue';
      }
    }
    if (this.bigger) {
      this.scaleVal += (this.maxScale - this.scaleVal)*0.2;
    } else {
      this.scaleVal += (1 - this.scaleVal)*0.2;
    }
    this.mouse.style.opacity = this.mouseOpac; 
    Control.transform(this.mouse, this.mx, this.my, this.scaleVal);
    this.lis.forEach(e => e.render());
  }
}

class Lis {
  constructor(el, color) {
    this.el = el;
    this.color = color;
    this.r = 35;
    this.center = {};
  }

  init() {
    let rect = this.el.getBoundingClientRect();
    this.center.x = rect.left + rect.width/2;
    this.center.y = rect.top + rect.height/2;
    this.dx = this.center.x;
    this.dy = this.center.y;
  }
  render() {
    let dist = Control.getDist(controler.mouseVal.x, 
                               controler.mouseVal.y, 
                               this.center.x, this.center.y);
    if (dist < this.r) {
      controler.mouseColor = this.color;
      this.dx += (controler.mouseVal.x - this.dx)*0.1;
      this.dy += (controler.mouseVal.y - this.dy)*0.1;
    } else {
      this.dx += (this.center.x - this.dx)*0.1;
      this.dy += (this.center.y - this.dy)*0.1;
    }
    Control.transform(this.el, this.dx - this.center.x, 
                        this.dy - this.center.y, 1);
  }
}

const controler = new Control(data);

window.addEventListener('mousemove', e => {
  controler.pointerVal = {x: e.clientX, y: e.clientY}
});
window.addEventListener('touchmove', e => {
  e.preventDefault();
  controler.pointerVal = {x: e.targetTouches[0].clientX, 
                          y: e.targetTouches[0].clientY}
});
window.addEventListener('load', () => controler.init());
window.addEventListener('resize', () => {
  controler.lis.forEach(e => e.init())
});

const run = () => {
  requestAnimationFrame(run);
  controler.render();
}
run();}

</script>


@charset "UTF-8";

	@font-face {
			font-family: "Merriweather";
			src: url("/fonts/MerriweatherBI/MerriweatherBoldItalic.eot");
			src: url("/fonts/MerriweatherBI/MerriweatherBoldItalic.eot?#iefix")format("embedded-opentype"),
			url("/fonts/MerriweatherBI/MerriweatherBoldItalic.woff") format("woff"),
			url("/fonts/MerriweatherBI/MerriweatherBoldItalic.ttf") format("truetype");
			font-style: italic;
			font-weight: 700;
	}

    @font-face {
			font-family: "Open Sans";
			src: url("/fonts/OpenSansR/OpenSans-Regular.eot");
			src: url("/fonts/OpenSansR/OpenSans-Regular.eot?#iefix")format("embedded-opentype"),
			url("/fonts/OpenSansR/OpenSans-Regular.woff") format("woff"),
			url("/fonts/OpenSansR/OpenSans-Regular.woff2") format("woff2"),
			url("/fonts/OpenSansR/OpenSans-Regular.ttf") format("truetype");
			font-style: normal;
			font-weight: normal;
	}
	

body {margin: 0;
    --body-background-color: #F8FAFF;
    --text-color: #312c29;
    --bubble-color: #ff0081;
    color: var(--text-color);
    background: var(--body-background-color);
    overflow-x: hidden;
    display: flex;
    min-height: 1400px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 300;
}

.site {
    width: 100%;
}
.site-header {
    height: 40px;
}

.bar {display: block;
    min-height: 40px;
    position: fixed;
    top: 0;
    width: 100%;}
.bar::before{
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    -webkit-box-shadow: 0 13px 30px 40px var(--body-background-color);
    -moz-box-shadow: 0 13px 30px 40px var(--body-background-color);
    box-shadow: 0 13px 30px 40px var(--body-background-color);
}
.bar > a {
    outline: 0;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 21px;
    float: left;
    height: 34px;
    text-align: center;
    padding: 6px 10px 0 10px;
    text-decoration: none;
    position: relative;
    color: inherit;
} 



.magick-click {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  
}



.magick-click:before, .magick-click:after {
  position: absolute;
  content: '';
  display: block;
  width: 140%;
  height: 100%;
  left: -20%;
  z-index: -1000;
  transition: all ease-in-out 0.5s;
  background-repeat: no-repeat;
}
.magick-click:before {
  display: none;
  top: -75%;
  background-image: radial-gradient(circle, var(--bubble-color) 20%, transparent 20%), radial-gradient(circle, transparent 20%, var(--bubble-color) 20%, transparent 30%), radial-gradient(circle, var(--bubble-color) 20%, transparent 20%), radial-gradient(circle, var(--bubble-color) 20%, transparent 20%), radial-gradient(circle, transparent 10%, var(--bubble-color) 15%, transparent 20%), radial-gradient(circle, var(--bubble-color) 20%, transparent 20%), radial-gradient(circle, var(--bubble-color) 20%, transparent 20%), radial-gradient(circle, var(--bubble-color) 20%, transparent 20%), radial-gradient(circle, var(--bubble-color) 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
.magick-click:after {
  display: none;
  bottom: -75%;
  background-image: radial-gradient(circle, var(--bubble-color) 20%, transparent 20%), radial-gradient(circle, var(--bubble-color) 20%, transparent 20%), radial-gradient(circle, transparent 10%, var(--bubble-color) 15%, transparent 20%), radial-gradient(circle, var(--bubble-color) 20%, transparent 20%), radial-gradient(circle, var(--bubble-color) 20%, transparent 20%), radial-gradient(circle, var(--bubble-color) 20%, transparent 20%), radial-gradient(circle, var(--bubble-color) 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.magick-click:active {
  transform: scale(0.9);
}
.magick-click.animate:before {
  display: block;
  animation: topBubbles ease-in-out 0.75s forwards;
}
.magick-click.animate:after {
  display: block;
  animation: bottomBubbles ease-in-out 0.75s forwards;
}

@keyframes topBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
  }
}
@keyframes bottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
  }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
  }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
    background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
  }
}
















.searchicon {
  display: table;
    float: right; 
    padding-top: 6px;
    margin-right: 50px;
}
.searchicon input {
  background: none;
  border: none;
  outline: none;
  width: 28px;
  min-width: 0;
  padding: 0;
  z-index: 1;
  position: relative;
  line-height: 18px;
  font-size: inherit;
  font-family: inherit;
  margin: 5px 0;
  -webkit-appearance: none;
  transition: all .6s ease;
  cursor: pointer;
  color: var(--text-color);
}
.searchicon input + div {
  position: relative;
  height: 28px;
  width: 100%;
  margin: -28px 0 0 0;
}
.searchicon input + div svg {
  display: block;
  position: absolute;
  height: 28px;
  width: 160px;
  right: 0;
  top: 0;
  fill: none;
  stroke: var(--text-color);
  stroke-width: 1.5px;
  stroke-dashoffset: 271.908;
  stroke-dasharray: 59 212.908;
  transition: all .6s ease;
}
.searchicon input:not(:placeholder-shown), .searchicon input:focus, .searchicon input:hover {
  width: 160px;
  padding: 0 4px;
  cursor: text;
}
.searchicon input:not(:placeholder-shown) + div svg, .searchicon input:focus + div svg, .searchicon input:hover + div svg {
  stroke-dasharray: 150 212.908;
  stroke-dashoffset: 300;
}










.menunav {
  display: block;
  padding-top: 80px;
  padding-bottom: 80px;
  flex-flow: column nowrap;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  width: 350px;
  max-width: 70vw;
  height: 100%;
  background: var(--body-background-color);
  --menunav-left-border: #e8edfa;
  border-left: 15px solid var(--menunav-left-border);
-webkit-clip-path: circle(29px at calc(470px - 5vw - 30px) -40px);
    clip-path: circle(29px at calc(470px - 5vw - 30px) -40px);
  transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);overflow: auto;
}
.menunav.menuactive {
  -webkit-clip-path: circle(75% at 175px 50vh);
          clip-path: circle(75% at 175px 50vh);
}
.nav__link {
  display: block;
  text-transform: lowercase;
  letter-spacing: -1px;
  text-align: right;
  padding: 1vh 5vw;
  color: var(--text-color);
  text-decoration: none;
  transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
  opacity: 0;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}
.menunav > *:nth-child(1) {
  transition-delay: 0.05s;
}
.menunav > *:nth-child(2) {
  transition-delay: 0.1s;
}
.menunav > *:nth-child(3) {
  transition-delay: 0.15s;
}
.menunav > *:nth-child(4) {
  transition-delay: 0.2s;
}
.menunav > *:nth-child(5) {
  transition-delay: 0.23s;
}
.menunav > *:nth-child(6) {
  transition-delay: 0.26s;
}
.menunav > *:nth-child(7) {
  transition-delay: 0.29s;
}
.menunav > *:nth-child(8) {
  transition-delay: 0.32s;
}
.menunav > *:nth-child(9) {
  transition-delay: 0.35s;
}
.menunav > *:nth-child(10) {
  transition-delay: 0.38s;
}
.menunav > *:nth-child(11) {
  transition-delay: 0.41s;
}
.menunav > *:nth-child(12) {
  transition-delay: 0.44s;
}
.menunav > *:nth-child(13) {
  transition-delay: 0.47s;
}
.menunav > *:nth-child(14) {
  transition-delay: 0.50s;
}
.menunav > *:nth-child(15) {
  transition-delay: 0.53s;
}
.menunav > *:nth-child(16) {
  transition-delay: 0.56s;
}
.menunav > *:nth-child(17) {
  transition-delay: 0.59s;
}
.menunav > *:nth-child(18) {
  transition-delay: 0.62s;
}
.menunav > *:nth-child(19) {
  transition-delay: 0.65s;
}
.menunav > *:nth-child(20) {
  transition-delay: 0.68s;
}
.menunav > *:last-child {
padding-bottom: 180px;
}


.nav__link.menuactive {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.hamburger {
    width: 50px;
    height: 40px;
    cursor: pointer;
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
}
.hamburger__patty {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, calc(-50% - 1px));
          transform: translate(-50%, calc(-50% - 1px));
  height: 2px;
  width: 50%;
  border-radius: 50% 50%;
  backgroud-clip: padding-box;
  background: var(--text-color);
  transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
.hamburger__patty:nth-child(1) {
  -webkit-transform: translate(-50%, calc(-50% - 10px));
          transform: translate(-50%, calc(-50% - 10px));
}
.hamburger__patty:last-child {
  -webkit-transform: translate(-50%, calc(-50% + 8px));
          transform: translate(-50%, calc(-50% + 8px));
}
.hamburger.menuactive .hamburger__patty {
  background: var(--text-color);
}
.hamburger.menuactive .hamburger__patty:nth-child(1) {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.hamburger.menuactive .hamburger__patty:nth-child(2) {
  opacity: 0;
}
.hamburger.menuactive .hamburger__patty:nth-child(3) {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
 
.onlyp {
  color: black;
  position: absolute;
  bottom: 5vh;
  left: 5vw;
  opacity: 0.35;
}








 
.menunav::-webkit-scrollbar-track {border-radius: 4px;}
.menunav::-webkit-scrollbar {width: 6px;}
.menunav::-webkit-scrollbar-thumb {border-radius: 4px;background: var(--body-background-color);transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);}
.menunav:hover::-webkit-scrollbar-thumb {background: var(--menunav-left-border);transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);}



@media only screen and (max-width: 769px) {
    .bar {bottom: 0;
    top: unset;}
    .menunav > *:last-child {
    padding-bottom: unset;
}
.menunav > *:first-child {
}
.menunav {
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: column-reverse;
    bottom: 0;
    top: unset;
    padding-top: 0;
    padding-bottom: 0;
}
@media only screen and (max-width: 400px) {
  .bar > a {font-size: 17px;
    height: 31px;
    padding: 9px 10px 0 10px;}  
}