Retro_Vintage_Sticky_Navigation_Component
Una compleja barra de navegación fija de inspiración retro/vintage diseñada para sitios web de eventos o conferencias, con una combinación de colores pastel suaves, capacidad de respuesta total y compatibilidad con el modo oscuro. Incluye un logotipo, enlaces de navegación, un botón de llamada a la acción y un icono de búsqueda.
Código HTML
<header class="sticky top-0 z-50 w-full bg-pink-100/90 backdrop-blur-sm shadow-md transition-colors duration-300 dark:bg-zinc-800/90">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between font-mono text-pink-700 dark:text-pink-300">
<div class="flex items-center space-x-4">
<!-- Logo / Event Title -->
<a href="#" class="text-2xl font-bold tracking-tight uppercase group dark:text-pink-100">
<span class="block transform -rotate-6 group-hover:rotate-0 transition-transform duration-200 ease-in-out text-pink-600 dark:text-pink-200">Future</span>
<span class="block transform rotate-6 group-hover:rotate-0 transition-transform duration-200 ease-in-out text-pink-800 dark:text-pink-400">Fest '92</span>
</a>
</div>
<!-- Mobile Menu Button -->
<div class="lg:hidden">
<button id="mobile-menu-button" class="p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400">
<svg class="w-7 h-7 text-pink-700 dark:text-pink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
<!-- Desktop Navigation & CTA -->
<div class="hidden lg:flex items-center space-x-8">
<ul class="flex space-x-6 text-lg">
<li><a href="#schedule" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
Schedule
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
</a></li>
<li><a href="#speakers" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
Speakers
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
</a></li>
<li><a href="#tickets" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
Tickets
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
</a></li>
<li><a href="#venue" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
Venue
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
</a></li>
<li><a href="#faq" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
FAQ
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
</a></li>
</ul>
<a href="#buytickets" class="px-6 py-2 bg-pink-500 text-white font-bold rounded-full shadow-lg transform -skew-x-12 hover:scale-105 hover:bg-pink-600 transition-all duration-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:text-pink-50">
<span class="inline-block transform skew-x-12">Get Tickets!</span>
</a>
<button class="p-2 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400 rounded-full group">
<svg class="w-6 h-6 text-pink-700 group-hover:text-pink-900 transition-colors duration-200 dark:text-pink-300 dark:group-hover:text-pink-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</div>
</nav>
<!-- Mobile Menu (hidden by default) -->
<div id="mobile-menu" class="hidden lg:hidden bg-pink-50 dark:bg-zinc-700 px-4 py-4 border-t border-pink-200 dark:border-zinc-600 text-center font-mono">
<ul class="flex flex-col space-y-4 text-lg text-pink-700 dark:text-pink-300">
<li><a href="#schedule" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Schedule</a></li>
<li><a href="#speakers" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Speakers</a></li>
<li><a href="#tickets" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Tickets</a></li>
<li><a href="#venue" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Venue</a></li>
<li><a href="#faq" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">FAQ</a></li>
</ul>
<a href="#buytickets" class="mt-6 inline-block w-full max-w-xs px-6 py-3 bg-pink-500 text-white font-bold rounded-full shadow-lg transform -skew-x-12 hover:scale-105 hover:bg-pink-600 transition-all duration-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:text-pink-50">
<span class="inline-block transform skew-x-12">Get Tickets!</span>
</a>
<button class="mt-4 p-2 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400 rounded-full group">
<svg class="w-6 h-6 text-pink-700 group-hover:text-pink-900 transition-colors duration-200 dark:text-pink-300 dark:group-hover:text-pink-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</div>
</header>
<script>
// Basic JavaScript for mobile menu toggle (required for interaction)
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu when a link is clicked
const menuLinks = mobileMenu.querySelectorAll('a');
menuLinks.forEach(link => {
link.addEventListener('click', function() {
mobileMenu.classList.add('hidden');
});
});
}
});
</script>Componentes relacionados
Componente de navegación pegajosa
Componente de navegación pegajoso con estilo Glassmorphism, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Navegación pegajosa skeuomórfica en escala de grises
Una barra de navegación pegajosa y receptiva para blogs, diseñada con esqueuomorfismo utilizando una paleta en escala de grises. Cuenta con soporte para modo oscuro y un diseño simple. Construido con Tailwind CSS (solo HTML), sin JavaScript. El diseño skeuomórfico tiene como objetivo hacer que la barra de navegación parezca un elemento físico ligeramente elevado.
Componente de navegación pegajosa
Una barra de navegación pegajosa y receptiva con efectos de neón/brillo, adecuada para plataformas educativas o de aprendizaje. Cuenta con un esquema de color púrpura/violeta, compatibilidad con el modo oscuro y elementos de menú interactivos.