Composant de navigation collante
Une barre de navigation simple, réactive et collante adaptée à une place de marché, avec un schéma de couleurs analogue et la prise en charge du mode sombre. Comprend des micro-interactions subtiles au survol.
HTML Code
<header class="sticky top-0 z-50 bg-emerald-100/90 backdrop-blur-sm shadow-sm dark:bg-emerald-950/90 dark:shadow-lg transition-colors duration-300">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between">
<div class="flex items-center space-x-8">
<a href="#" class="flex items-center group">
<svg class="h-8 w-8 text-emerald-600 dark:text-emerald-300 group-hover:rotate-6 transition-transform duration-200 ease-out" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM5.293 8.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L10 9.586l-1.293-1.293z" clip-rule="evenodd"></path>
</svg>
<span class="ml-2 text-2xl font-bold tracking-tight text-emerald-800 dark:text-emerald-100 group-hover:text-emerald-600 dark:group-hover:text-emerald-200 transition-colors duration-200">MarketPulse</span>
</a>
<ul class="hidden md:flex space-x-6">
<li>
<a href="#" class="text-emerald-700 dark:text-emerald-200 text-lg font-medium hover:text-emerald-900 dark:hover:text-emerald-50 transition-colors duration-200 relative group">
Products
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-600 dark:bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-out"></span>
</a>
</li>
<li>
<a href="#" class="text-emerald-700 dark:text-emerald-200 text-lg font-medium hover:text-emerald-900 dark:hover:text-emerald-50 transition-colors duration-200 relative group">
Categories
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-600 dark:bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-out"></span>
</a>
</li>
<li>
<a href="#" class="text-emerald-700 dark:text-emerald-200 text-lg font-medium hover:text-emerald-900 dark:hover:text-emerald-50 transition-colors duration-200 relative group">
Vendors
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-600 dark:bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-out"></span>
</a>
</li>
</ul>
</div>
<div class="flex items-center space-x-4">
<button class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="Search">
<svg class="h-6 w-6" 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>
<button class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="Cart">
<svg class="h-6 w-6" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13H4m0 0l2 2m-2-2a2 2 0 100 4 2 2 0 000-4zM17 13h-4m4 0l-2 2m2-2a2 2 0 100 4 2 2 0 000-4z"></path>
</svg>
</button>
<button class="p-2 rounded-full hidden md:block bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="User Profile">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="h-7 w-7 rounded-full object-cover border border-emerald-300 dark:border-emerald-700">
</button>
<div class="flex items-center space-x-2">
<button id="dark-mode-toggle" aria-label="Toggle dark mode" class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105">
<svg class="h-6 w-6 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<svg class="h-6 w-6 dark:hidden" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 4a1 1 0 011 1v1a1 1 0 11-2 0V7a1 1 0 011-1zM2 10a1 1 0 011-1h1a1 1 0 110 2H3a1 1 0 01-1-1zm15 0a1 1 0 011-1h1a1 1 0 110 2h-1a1 1 0 01-1-1zM9 16a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.586 5.586a1 1 0 010-1.414l.707-.707a1 1 0 011.414 0l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414 0l-.707-.707zm5.657 8.947a1 1 0 01-1.414 0l-.707-.707a1 1 0 010-1.414l.707-.707a1 1 0 011.414 0l.707.707a1 1 0 010 1.414l-.707.707zM4 10a6 6 0 1112 0 6 6 0 01-12 0z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<button class="md:hidden p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="Open menu">
<svg class="h-6 w-6" 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 12h16M4 18h16"></path>
</svg>
</button>
</div>
</nav>
</header>
<script>
// Dark mode functionality (optional, not part of the HTML/CSS requirement but common for such components)
const toggleDarkMode = () => {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
};
const darkLightToggle = document.getElementById('dark-mode-toggle');
if (darkLightToggle) {
darkLightToggle.addEventListener('click', toggleDarkMode);
}
// Apply saved theme on load
if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>Composants associés
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.
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.
Composant de navigation collante
Un composant de navigation autocollant skeuomorphe conçu pour les sites Web d’actualités/journalisme, avec une palette de couleurs noir et blanc avec une couleur d’accentuation vive, une réactivité et une prise en charge du mode sombre. Il imite les boutons et les éléments encastrés du monde réel.