Categoría · Menús de Navegación Nivel de Dificultad · Avanzado Publicado el · 15 de enero de 2024

Menú de Navegación Cyberpunk

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ú

Diseño Responsivo

Sí

Soporte para Modo Oscuro

líneas

524

Compatibilidad del Navegador

Vista Previa en Vivo

Interactúa con el componente sin salir de la página.

300px

Menú de Navegación Cyberpunk

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.

Características

Efectos Neón: Brillos y sombras de texto con colores vibrantes
Glitch Digital: Efectos de distorsión y parpadeo característicos del cyberpunk
Lluvia Digital: Animaciones inspiradas en Matrix
Bordes Cortados: Diseño geométrico futurista
Efectos Eléctricos: Pulsos y chispas interactivas
Líneas de Escaneo: Efectos de exploración digital

Uso

Ideal para:

Sitios web de gaming
Portfolios de desarrolladores
Sitios de tecnología
Aplicaciones futuristas
Interfaces de ciencia ficción
Proyectos de arte digital

El menú crea una experiencia inmersiva con animaciones CSS avanzadas e interacciones JavaScript que simulan la estética cyberpunk y de alta tecnología.

HTML

líneas

CSS

264

líneas

JavaScript

218

líneas

                <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>

              

                @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%;
  }
}

              

                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);
});

              

Menú de Navegación Cyberpunk

Vista Previa en Vivo

Menú de Navegación Cyberpunk

Características

Uso

Fragmentos de Código Relacionados

Menú de Navegación Fluido con Gradientes

Menú de Navegación Neón Brillante

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

Explora packs de plantillas