Componente di navigazione permanente
Una barra di navigazione semplice, reattiva e appiccicosa adatta a un marketplace, con una combinazione di colori analoga e il supporto della modalità scura. Include microinterazioni sottili al passaggio del mouse.
Codice HTML
<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>Componenti correlati
Componente di navigazione permanente
Una barra di navigazione appiccicosa minimalista e reattiva per i blog, caratterizzata da una combinazione di colori vivaci. Supporta la modalità oscura e ha un layout semplice e pulito con "Titolo del blog" a sinistra e collegamenti di navigazione a destra. La barra di navigazione si blocca nella parte superiore del riquadro di visualizzazione quando l'utente scorre.
Componente di navigazione permanente
Una barra di navigazione appiccicosa reattiva che segue le linee guida del Material Design, con una modalità scura.
Componente di navigazione permanente
Una barra di navigazione appiccicosa complessa e scheumorfica con colori vivaci, progettata per le interfacce dei social media. Include un design reattivo e il supporto per la modalità oscura utilizzando Tailwind CSS. Presenta l'immagine del profilo, la barra di ricerca, le notifiche e le icone di messaggistica.