Menú de Navegación Cyberpunk

snippet.publishedOn 15 de enero de 2024 Avanzado

Un menú de navegación futurista estilo cyberpunk con brillos neón, efectos de glitch digital, animaciones inspiradas en Matrix y elementos estéticos de alta tecnología

#cyberpunk #futurista #neón #glitch #matrix #digital #menú

Vista Previa en Vivo

Implementación del Código

HTML

<nav class="cyberpunk-menu">
  <div class="menu-container">
    <div class="glitch-bg"></div>
    <div class="logo">
      <span class="logo-text">CYBER</span>
      <div class="logo-glitch"></div>
    </div>
    <ul class="menu-items">
      <li class="menu-item">
        <a href="#" class="menu-link" data-text="INICIO">
          <span class="link-text">INICIO</span>
          <div class="neon-effect"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link" data-text="ACERCA">
          <span class="link-text">ACERCA</span>
          <div class="neon-effect"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link" data-text="SERVICIOS">
          <span class="link-text">SERVICIOS</span>
          <div class="neon-effect"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link" data-text="PORTAFOLIO">
          <span class="link-text">PORTAFOLIO</span>
          <div class="neon-effect"></div>
        </a>
      </li>
      <li class="menu-item">
        <a href="#" class="menu-link" data-text="CONTACTO">
          <span class="link-text">CONTACTO</span>
          <div class="neon-effect"></div>
        </a>
      </li>
    </ul>
    <div class="matrix-rain"></div>
  </div>
</nav>

CSS

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

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

body {
  font-family: 'Orbitron', monospace;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0a1a 50%, #0a1a0a 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

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

.menu-container {
  position: relative;
  background: linear-gradient(135deg, 
    rgba(0, 255, 255, 0.1) 0%, 
    rgba(255, 0, 255, 0.1) 50%, 
    rgba(255, 255, 0, 0.1) 100%);
  border: 2px solid #00ffff;
  border-radius: 0;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(10px);
  box-shadow: 
    0 0 20px #00ffff,
    inset 0 0 20px rgba(0, 255, 255, 0.1),
    0 0 40px rgba(255, 0, 255, 0.3);
  animation: cyberpunk-flicker 4s infinite;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.menu-container::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, 
    #ff0080, #00ffff, #ff0080, #00ffff);
  z-index: -1;
  animation: border-scan 3s linear infinite;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.glitch-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      rgba(255, 0, 128, 0.03) 1px,
      transparent 2px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      rgba(0, 255, 255, 0.03) 1px,
      transparent 2px
    );
  animation: glitch-lines 2s linear infinite;
}

.logo-text {
  font-size: 2.5rem;
  font-weight: 900;
  color: #ff0080;
  text-shadow: 
    0 0 5px #ff0080,
    0 0 10px #ff0080,
    0 0 15px #ff0080,
    0 0 20px #ff0080;
  position: relative;
  z-index: 2;
  animation: logo-pulse 2s ease-in-out infinite;
}

.logo-glitch {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, #00ffff, transparent);
  opacity: 0;
  animation: logo-glitch 3s ease-in-out infinite;
}

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

.menu-link {
  position: relative;
  color: #00ffff;
  text-decoration: none;
  font-weight: 700;
  padding: 15px 25px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 2px;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

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

.neon-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    rgba(255, 0, 128, 0.2), 
    rgba(0, 255, 255, 0.2), 
    rgba(255, 255, 0, 0.2));
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s ease;
}

.menu-link:hover {
  border-color: #ff0080;
  transform: translateY(-3px);
  box-shadow: 
    0 5px 15px rgba(255, 0, 128, 0.4),
    0 0 30px rgba(0, 255, 255, 0.3),
    inset 0 0 20px rgba(255, 255, 0, 0.1);
}

.menu-link:hover .neon-effect {
  opacity: 1;
  transform: scale(1);
}

.menu-link:hover .link-text {
  text-shadow: 
    0 0 5px #ff0080,
    0 0 10px #00ffff,
    0 0 15px #ffff00;
  color: #ffffff;
}

.matrix-rain {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(0, 255, 0, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 0, 128, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.1) 0%, transparent 50%);
  animation: matrix-flow 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cyberpunk-flicker {
  0%, 100% { opacity: 1; }
  97% { opacity: 1; }
  98% { opacity: 0.8; }
  99% { opacity: 1; }
  99.5% { opacity: 0.9; }
}

@keyframes border-scan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glitch-lines {
  0% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}

@keyframes logo-pulse {
  0%, 100% { 
    text-shadow: 
      0 0 5px #ff0080,
      0 0 10px #ff0080,
      0 0 15px #ff0080,
      0 0 20px #ff0080;
  }
  50% { 
    text-shadow: 
      0 0 10px #ff0080,
      0 0 20px #ff0080,
      0 0 30px #ff0080,
      0 0 40px #ff0080;
  }
}

@keyframes logo-glitch {
  0%, 90%, 100% { opacity: 0; }
  91% { opacity: 0.7; transform: translateX(-2px); }
  92% { opacity: 0.5; transform: translateX(2px); }
  93% { opacity: 0.8; transform: translateX(-1px); }
}

@keyframes matrix-flow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

@media (max-width: 768px) {
  .menu-container {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }
  
  .menu-items {
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .menu-link {
    padding: 10px 15px;
    font-size: 0.9rem;
  }
  
  .logo-text {
    font-size: 2rem;
  }
  
  .cyberpunk-menu {
    width: 95%;
  }
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  // Enhanced cyberpunk effects
  const menuLinks = document.querySelectorAll('.menu-link');
  const menuContainer = document.querySelector('.menu-container');
  
  // Create digital rain effect
  function createDigitalRain() {
    const rain = document.createElement('div');
    rain.style.position = 'absolute';
    rain.style.width = '2px';
    rain.style.height = '20px';
    rain.style.background = 'linear-gradient(to bottom, #00ff00, transparent)';
    rain.style.left = Math.random() * 100 + '%';
    rain.style.top = '-20px';
    rain.style.pointerEvents = 'none';
    rain.style.animation = 'rain-fall 2s linear infinite';
    
    menuContainer.appendChild(rain);
    
    setTimeout(() => {
      if (rain.parentNode) {
        rain.parentNode.removeChild(rain);
      }
    }, 2000);
  }
  
  // Add rain animation CSS
  const style = document.createElement('style');
  style.textContent = `
    @keyframes rain-fall {
      0% {
        transform: translateY(0);
        opacity: 1;
      }
      100% {
        transform: translateY(100px);
        opacity: 0;
      }
    }
    
    @keyframes cyberpunk-glitch {
      0%, 100% { transform: translateX(0); }
      10% { transform: translateX(-2px); }
      20% { transform: translateX(2px); }
      30% { transform: translateX(-1px); }
      40% { transform: translateX(1px); }
      50% { transform: translateX(-2px); }
      60% { transform: translateX(2px); }
      70% { transform: translateX(-1px); }
      80% { transform: translateX(1px); }
      90% { transform: translateX(0); }
    }
  `;
  document.head.appendChild(style);
  
  // Create digital rain periodically
  setInterval(createDigitalRain, 300);
  
  // Enhanced hover effects
  menuLinks.forEach(link => {
    link.addEventListener('mouseenter', function() {
      // Add cyberpunk glitch
      this.style.animation = 'cyberpunk-glitch 0.2s infinite';
      
      // Create spark effect
      for (let i = 0; i < 3; i++) {
        setTimeout(() => createSpark(this), i * 100);
      }
    });
    
    link.addEventListener('mouseleave', function() {
      this.style.animation = '';
    });
    
    // Add click effect
    link.addEventListener('click', function(e) {
      e.preventDefault();
      
      // Create electric pulse
      const pulse = document.createElement('div');
      const rect = this.getBoundingClientRect();
      
      pulse.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle, rgba(255, 0, 128, 0.8) 0%, transparent 70%);
        animation: electric-pulse 0.6s ease-out;
        pointer-events: none;
        z-index: 1;
      `;
      
      this.appendChild(pulse);
      
      setTimeout(() => {
        if (pulse.parentNode) {
          pulse.parentNode.removeChild(pulse);
        }
      }, 600);
    });
  });
  
  // Create spark effect
  function createSpark(element) {
    const spark = document.createElement('div');
    spark.style.position = 'absolute';
    spark.style.width = '3px';
    spark.style.height = '3px';
    spark.style.background = '#ffff00';
    spark.style.borderRadius = '50%';
    spark.style.pointerEvents = 'none';
    spark.style.left = Math.random() * 100 + '%';
    spark.style.top = Math.random() * 100 + '%';
    spark.style.boxShadow = '0 0 10px #ffff00';
    spark.style.animation = 'spark-fade 0.5s ease-out';
    
    element.appendChild(spark);
    
    setTimeout(() => {
      if (spark.parentNode) {
        spark.parentNode.removeChild(spark);
      }
    }, 500);
  }
  
  // Add spark animation
  const sparkStyle = document.createElement('style');
  sparkStyle.textContent = `
    @keyframes spark-fade {
      0% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(0);
      }
    }
    
    @keyframes electric-pulse {
      0% {
        opacity: 0;
        transform: scale(0.5);
      }
      50% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(1.5);
      }
    }
  `;
  document.head.appendChild(sparkStyle);
  
  // Random system glitch effects
  function addSystemGlitch() {
    const randomLink = menuLinks[Math.floor(Math.random() * menuLinks.length)];
    const originalColor = randomLink.style.color;
    
    randomLink.style.color = '#ff0080';
    randomLink.style.textShadow = '2px 0 #00ffff, -2px 0 #ff0080';
    
    setTimeout(() => {
      randomLink.style.color = originalColor;
      randomLink.style.textShadow = '';
    }, 150);
  }
  
  // Add periodic glitch effects
  setInterval(addSystemGlitch, 2000);
  
  // Cyberpunk scan line effect
  function createScanLine() {
    const scanLine = document.createElement('div');
    scanLine.style.cssText = `
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #00ffff, transparent);
      animation: scan-move 2s ease-in-out;
      pointer-events: none;
      z-index: 10;
    `;
    
    menuContainer.appendChild(scanLine);
    
    setTimeout(() => {
      if (scanLine.parentNode) {
        scanLine.parentNode.removeChild(scanLine);
      }
    }, 2000);
  }
  
  // Add scan line animation
  const scanStyle = document.createElement('style');
  scanStyle.textContent = `
    @keyframes scan-move {
      0% {
        top: 0;
        opacity: 1;
      }
      100% {
        top: 100%;
        opacity: 0;
      }
    }
  `;
  document.head.appendChild(scanStyle);
  
  // Create scan lines periodically
  setInterval(createScanLine, 4000);
});

Características del Fragmento

Diseño Responsivo: Sí

Soporte para Modo Oscuro: No

Categoría: navigation-menus

Nivel de Dificultad: Avanzado

Fragmentos de Código Relacionados

Menú de Navegación Fluido con Gradientes

Un menú de navegación dinámico con animaciones de gradientes fluidos, efectos de morfismo líquido, transiciones suaves de color y diseño de movimiento fluido

Avanzado

15/1/2024

Menús de Navegación

gradiente fluido animación morfismo líquido dinámico menú

Ver Código

Menú de Navegación Neón Brillante

Un menú de navegación futurista con efectos de brillo neón vibrantes, bordes animados y estética cyberpunk

Intermedio

15/1/2024

Menús de Navegación

neon brillo cyberpunk futurista animacion menu navegacion

Ver Código

Menú de Navegación con Proyección Holográfica

Un menú de navegación futurista con efectos de proyección holográfica, ilusiones de profundidad 3D, animaciones de refracción de luz y experiencias visuales inmersivas

Avanzado

15/1/2024

Menús de Navegación

holográfico proyección 3D futurista luz refracción inmersivo menú

Ver Código