Retro_Vintage_Sticky_Navigation_Component
Une barre de navigation autocollante complexe, d’inspiration rétro/vintage, conçue pour les sites Web d’événements ou de conférences, avec une palette de couleurs pastel douces, une réactivité totale et une prise en charge du mode sombre. Il comprend un logo, des liens de navigation, un bouton d’appel à l’action et une icône de recherche.
HTML Code
<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>Composants associés
Brutalisme Navigation collante
Un composant de navigation autocollant complexe avec un design brutaliste, une palette de couleurs monochromatiques, conçu pour les portfolios, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Skeuomorphe en niveaux de gris Sticky Nav
Une barre de navigation autocollante réactive pour les blogs, stylisée avec un skeuomorphisme à l’aide d’une palette en niveaux de gris. Dispose d’une prise en charge du mode sombre et d’une mise en page simple. Construit avec Tailwind CSS (HTML uniquement), pas de JavaScript. Le design skeuomorphe vise à faire apparaître la barre de navigation comme un élément physique, légèrement en relief.
Composant de navigation collante
Une barre de navigation autocollante minimaliste et réactive pour les blogs, avec une palette de couleurs vives. Il prend en charge le mode sombre et a une mise en page simple et propre avec « Titre du blog » à gauche et des liens de navigation à droite. La barre de navigation se colle en haut de la fenêtre d’affichage lorsque l’utilisateur fait défiler la page.