Categoría · Menús de Navegación Nivel de Dificultad · Avanzado Publicado el · 15 de enero de 2024
Menú de Navegación Onda Líquida
Un menú de navegación fluido con animaciones de ondas líquidas, efectos de transformación y transiciones suaves que crean una sensación orgánica
#liquido #onda #fluido #transformacion #organico #animacion #menu
Diseño Responsivo
Sí
Soporte para Modo Oscuro
No
líneas
182
Compatibilidad del Navegador
No
Vista Previa en Vivo
Interactúa con el componente sin salir de la página.
Menú de Navegación Onda Líquida
Un menú de navegación fluido con animaciones de ondas líquidas que crean efectos de transformación orgánicos y transiciones suaves.
Características
- Efectos líquidos: Animaciones de ondas que se expanden al hacer hover
- Diseño glassmorphism: Fondo translúcido con efecto de desenfoque
- Responsive: Adaptable a dispositivos móviles con menú hamburguesa
- Transiciones suaves: Animaciones fluidas y naturales
- Gradientes dinámicos: Colores que cambian con las interacciones
Uso
Este menú es perfecto para sitios web modernos que buscan un diseño innovador y fluido. Las animaciones líquidas proporcionan una experiencia de usuario única y memorable.
Personalización
- Modifica los colores del gradiente en
.liquid-bg - Ajusta la velocidad de animación en las transiciones
- Cambia el efecto de desenfoque en
backdrop-filter - Personaliza la forma de las ondas modificando
border-radius
Compatibilidad
- Chrome/Edge: Soporte completo
- Firefox: Soporte completo
- Safari: Soporte completo
- IE: No compatible (requiere backdrop-filter)
JavaScript (Opcional)
// Funcionalidad del menú hamburguesa
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
});
// Cerrar menú al hacer clic en un enlace
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
});
});HTML
40
líneas
CSS
142
líneas
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú de Navegación Onda Líquida</title>
</head>
<body>
<nav class="liquid-nav">
<div class="nav-container">
<div class="logo">
<h2>LiquidNav</h2>
</div>
<ul class="nav-menu">
<li class="nav-item">
<a href="#" class="nav-link">Inicio</a>
<div class="liquid-bg"></div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Servicios</a>
<div class="liquid-bg"></div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Portfolio</a>
<div class="liquid-bg"></div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contacto</a>
<div class="liquid-bg"></div>
</li>
</ul>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
</body>
</html>