Category · Navigation Menus Difficulty Level · Advanced Published on · January 15, 2024

Liquid Wave Navigation Menu

A fluid navigation menu with liquid wave animations, morphing effects, and smooth transitions that create an organic feel

#liquid #wave #fluid #morphing #organic #animation #menu

Responsive Design

Yes

Dark Mode Support

lines

566

Browser Compatibility

Live Preview

Interact with the component without leaving the page.

300px

A fluid navigation menu with liquid wave animations, morphing effects, and smooth transitions that create an organic feel.

Features

Liquid Waves: Smooth wave animations with organic flow
Morphing Effects: Dynamic shape transformations and blob animations
Interactive Ripples: Touch-responsive wave ripple effects
Fluid Transitions: Natural easing with liquid-like motion
Glass Morphism: Backdrop blur with transparency effects
Responsive Design: Adapts beautifully to all screen sizes

Usage

Perfect for:

Creative agencies
Design studios
Modern web applications
Portfolio websites
Interactive experiences
Artistic projects

The menu creates an immersive liquid experience with wave animations, morphing blobs, and interactive effects that respond naturally to user interactions.

HTML

lines

CSS

260

lines

JavaScript

264

lines

                <nav class="liquid-menu">
  <div class="menu-container">
    <div class="wave-bg"></div>
    <div class="logo">
      <span class="logo-text">LIQUID</span>
      <div class="liquid-drop"></div>
    </div>
    <ul class="menu-items">
      <li class="menu-item">
        <a href="#" class="menu-link">
          <span class="link-text">Home</span>
          <div class="wave-effect"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link">
          <span class="link-text">About</span>
          <div class="wave-effect"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link">
          <span class="link-text">Services</span>
          <div class="wave-effect"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link">
          <span class="link-text">Portfolio</span>
          <div class="wave-effect"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link">
          <span class="link-text">Contact</span>
          <div class="wave-effect"></div>
        </a>
      </li>
    </ul>
    <div class="liquid-blob"></div>
  </div>
</nav>

              

                @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

.liquid-menu {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 90%;
  max-width: 900px;
}

.menu-container {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 50px;
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.wave-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(0, 150, 255, 0.3) 0%,
    rgba(0, 255, 150, 0.3) 25%,
    rgba(150, 0, 255, 0.3) 50%,
    rgba(255, 150, 0, 0.3) 75%,
    rgba(0, 150, 255, 0.3) 100%
  );
  background-size: 400% 400%;
  animation: wave-flow 10s ease-in-out infinite;
  border-radius: 50px;
}

.logo-text {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(45deg, #0096ff, #00ff96, #9600ff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: text-wave 4s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

.liquid-drop {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: linear-gradient(45deg, #0096ff, #00ff96);
  border-radius: 50%;
  animation: drop-fall 3s ease-in-out infinite;
}

.menu-items {
  display: flex;
  list-style: none;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.menu-link {
  position: relative;
  color: white;
  text-decoration: none;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 25px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: block;
}

.link-text {
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.wave-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 150, 255, 0.6) 0%,
    rgba(0, 255, 150, 0.6) 50%,
    rgba(150, 0, 255, 0.6) 100%
  );
  border-radius: 25px;
  transform: scale(0) rotate(45deg);
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  opacity: 0;
}

.menu-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.menu-link:hover .wave-effect {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  animation: wave-ripple 0.8s ease-out;
}

.menu-link:hover .link-text {
  color: white;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

.liquid-blob {
  position: absolute;
  width: 120px;
  height: 120px;
  background: linear-gradient(
    45deg,
    rgba(0, 150, 255, 0.4),
    rgba(0, 255, 150, 0.4),
    rgba(150, 0, 255, 0.4)
  );
  border-radius: 50%;
  filter: blur(25px);
  animation: blob-liquid 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes wave-flow {
  0%, 100% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0% 100%;
  }
}

@keyframes text-wave {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes drop-fall {
  0%, 100% {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(15px) scale(1.5);
    opacity: 0.7;
  }
}

@keyframes wave-ripple {
  0% {
    transform: scale(0.8) rotate(0deg);
  }
  50% {
    transform: scale(1.2) rotate(180deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}

@keyframes blob-liquid {
  0%, 100% {
    transform: translate(-30px, -30px) scale(1) rotate(0deg);
    border-radius: 50%;
  }
  25% {
    transform: translate(calc(100vw - 150px), -20px) scale(1.3) rotate(90deg);
    border-radius: 30% 70% 60% 40%;
  }
  50% {
    transform: translate(calc(100vw - 120px), calc(100vh - 150px)) scale(0.9) rotate(180deg);
    border-radius: 60% 40% 30% 70%;
  }
  75% {
    transform: translate(-20px, calc(100vh - 140px)) scale(1.1) rotate(270deg);
    border-radius: 40% 60% 70% 30%;
  }
}

@media (max-width: 768px) {
  .menu-container {
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    border-radius: 30px;
  }
  
  .menu-items {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .menu-link {
    padding: 10px 16px;
    font-size: 0.9rem;
  }
  
  .logo-text {
    font-size: 1.5rem;
  }
  
  .liquid-menu {
    width: 95%;
  }
  
  .liquid-blob {
    width: 80px;
    height: 80px;
  }
}

              

                document.addEventListener('DOMContentLoaded', function() {
  const menuLinks = document.querySelectorAll('.menu-link');
  const menuContainer = document.querySelector('.menu-container');
  const liquidBlob = document.querySelector('.liquid-blob');
  
  // Enhanced liquid wave effects
  menuLinks.forEach(link => {
    link.addEventListener('mouseenter', function() {
      // Create wave ripple
      createWaveRipple(this);
      
      // Add liquid distortion
      this.style.filter = 'blur(1px)';
      setTimeout(() => {
        this.style.filter = 'none';
      }, 300);
    });
    
    link.addEventListener('mouseleave', function() {
      this.style.filter = 'none';
    });
    
    // Add click wave effect
    link.addEventListener('click', function(e) {
      e.preventDefault();
      
      // Create liquid wave explosion
      createLiquidWave(this);
    });
  });
  
  // Create wave ripple effect
  function createWaveRipple(element) {
    const ripple = document.createElement('div');
    
    ripple.style.cssText = `
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 150, 255, 0.6) 0%, transparent 70%);
      transform: scale(0);
      animation: wave-expand 0.8s ease-out;
      pointer-events: none;
      z-index: 1;
      width: 120px;
      height: 120px;
      left: 50%;
      top: 50%;
      margin-left: -60px;
      margin-top: -60px;
    `;
    
    element.appendChild(ripple);
    
    setTimeout(() => {
      if (ripple.parentNode) {
        ripple.parentNode.removeChild(ripple);
      }
    }, 800);
  }
  
  // Create liquid wave effect
  function createLiquidWave(element) {
    const wave = document.createElement('div');
    
    wave.style.cssText = `
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(ellipse, 
        rgba(0, 150, 255, 0.8) 0%, 
        rgba(0, 255, 150, 0.6) 30%, 
        rgba(150, 0, 255, 0.4) 60%, 
        transparent 100%);
      border-radius: 25px;
      animation: liquid-wave 1s ease-out;
      pointer-events: none;
      z-index: 1;
    `;
    
    element.appendChild(wave);
    
    setTimeout(() => {
      if (wave.parentNode) {
        wave.parentNode.removeChild(wave);
      }
    }, 1000);
  }
  
  // Add CSS animations
  const style = document.createElement('style');
  style.textContent = `
    @keyframes wave-expand {
      0% {
        transform: scale(0);
        opacity: 1;
      }
      100% {
        transform: scale(2.5);
        opacity: 0;
      }
    }
    
    @keyframes liquid-wave {
      0% {
        transform: scale(0.3) rotate(0deg);
        opacity: 0;
      }
      50% {
        transform: scale(1.5) rotate(180deg);
        opacity: 1;
      }
      100% {
        transform: scale(2) rotate(360deg);
        opacity: 0;
      }
    }
    
    @keyframes liquid-flow {
      0%, 100% {
        transform: translateY(0) scaleX(1);
      }
      50% {
        transform: translateY(-8px) scaleX(1.2);
      }
    }
  `;
  document.head.appendChild(style);
  
  // Interactive blob following mouse
  let mouseX = 0;
  let mouseY = 0;
  let blobX = 0;
  let blobY = 0;
  
  document.addEventListener('mousemove', function(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
  });
  
  function animateBlob() {
    const dx = mouseX - blobX;
    const dy = mouseY - blobY;
    
    blobX += dx * 0.08;
    blobY += dy * 0.08;
    
    if (liquidBlob) {
      liquidBlob.style.transform = `translate(\${blobX - 60}px, \${blobY - 60}px)`;
    }
    
    requestAnimationFrame(animateBlob);
  }
  
  animateBlob();
  
  // Wave color cycling
  let wavePhase = 0;
  
  function cycleWaveColors() {
    wavePhase += 0.015;
    
    const waveBg = document.querySelector('.wave-bg');
    if (waveBg) {
      const hue1 = (wavePhase * 80) % 360;
      const hue2 = (wavePhase * 80 + 120) % 360;
      const hue3 = (wavePhase * 80 + 240) % 360;
      
      waveBg.style.background = `
        linear-gradient(
          45deg,
          hsla(\${hue1}, 80%, 60%, 0.3) 0%,
          hsla(\${hue2}, 80%, 60%, 0.3) 50%,
          hsla(\${hue3}, 80%, 60%, 0.3) 100%
        )
      `;
    }
    
    requestAnimationFrame(cycleWaveColors);
  }
  
  cycleWaveColors();
  
  // Liquid menu item animations
  function addLiquidMotion() {
    menuLinks.forEach((link, index) => {
      const delay = index * 150;
      
      setTimeout(() => {
        link.style.animation = `liquid-flow 4s ease-in-out infinite`;
        link.style.animationDelay = `\${index * 0.3}s`;
      }, delay);
    });
  }
  
  addLiquidMotion();
  
  // Liquid drop animation
  function createLiquidDrops() {
    const container = document.querySelector('.menu-container');
    
    setInterval(() => {
      const drop = document.createElement('div');
      drop.style.cssText = `
        position: absolute;
        width: 4px;
        height: 4px;
        background: linear-gradient(45deg, #0096ff, #00ff96);
        border-radius: 50%;
        top: \${Math.random() * 100}%;
        left: \${Math.random() * 100}%;
        animation: drop-float 3s ease-out forwards;
        pointer-events: none;
        z-index: 1;
      `;
      
      container.appendChild(drop);
      
      setTimeout(() => {
        if (drop.parentNode) {
          drop.parentNode.removeChild(drop);
        }
      }, 3000);
    }, 2000);
  }
  
  // Add drop float animation
  const dropStyle = document.createElement('style');
  dropStyle.textContent = `
    @keyframes drop-float {
      0% {
        transform: translateY(0) scale(0);
        opacity: 0;
      }
      20% {
        transform: translateY(-10px) scale(1);
        opacity: 1;
      }
      80% {
        transform: translateY(-30px) scale(1.2);
        opacity: 0.8;
      }
      100% {
        transform: translateY(-50px) scale(0);
        opacity: 0;
      }
    }
  `;
  document.head.appendChild(dropStyle);
  
  createLiquidDrops();
  
  // Parallax wave effect
  window.addEventListener('scroll', function() {
    const scrolled = window.pageYOffset;
    const waveBg = document.querySelector('.wave-bg');
    
    if (waveBg) {
      const speed = scrolled * 0.3;
      waveBg.style.transform = `translateY(\${speed}px) scale(1.1)`;
    }
  });
});

              

Liquid Wave Navigation Menu

Live Preview

Liquid Wave Navigation Menu

Features

Usage

Related Code Snippets

Liquid Wave FAQ

Animated Back to Top Button

Animated Chat Interface

Explore template packs