Minimalista Jewel-Tone Food/Restaurant Navigation
Un componente di navigazione minimalista e reattivo per siti Web di cibo e ristoranti, con toni gioiello, supporto per la modalità oscura e un design pulito e piatto. Include un logo, collegamenti di navigazione e un pulsante di invito all'azione, con un menu di hamburger ottimizzato per i dispositivi mobili.
Codice HTML
<nav class="bg-emerald-600 dark:bg-emerald-900 shadow-lg">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<!-- Logo -->
<a href="#" class="flex items-center space-x-2">
<svg class="h-8 w-8 text-white" 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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m-1.636 6.364l-.707-.707M12 21v-1m-6.364-1.636l-.707.707M3 12H2m1.636-6.364l.707-.707M9 11a3 3 0 11-6 0 3 3 0 016 0zm9 0a3 3 0 11-6 0 3 3 0 016 0zm-9 9a3 3 0 11-6 0 3 3 0 016 0zm9 0a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span class="text-white text-xl font-bold font-serif">FoodieFinds</span>
</a>
<!-- Desktop Navigation Links -->
<div class="hidden md:flex space-x-8">
<a href="#menu" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
Menu
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#how-it-works" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
How It Works
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#restaurants" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
Restaurants
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#contact" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
Contact
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</div>
<!-- Call to Action Button -->
<div class="hidden md:block">
<button class="bg-white text-emerald-700 dark:bg-emerald-700 dark:text-white px-5 py-2 rounded-full font-semibold hover:bg-emerald-100 dark:hover:bg-emerald-600 transition-all duration-300 shadow-md">
Order Now
</button>
</div>
<!-- Mobile Menu Button (Hamburger Icon) -->
<div class="md:hidden">
<button class="text-white focus:outline-none focus:ring-2 focus:ring-emerald-200 rounded-md p-1" aria-label="Toggle menu">
<svg class="h-7 w-7" 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>
</div>
<!-- Mobile Navigation Menu (hidden by default, would be toggled by JS) -->
<!-- For demonstration, using simple display classes; in a real app, you'd use JS to toggle 'hidden' -->
<div class="md:hidden hidden bg-emerald-700 dark:bg-emerald-800 py-2" id="mobile-menu">
<a href="#menu" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Menu</a>
<a href="#how-it-works" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">How It Works</a>
<a href="#restaurants" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Restaurants</a>
<a href="#contact" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Contact</a>
<div class="px-4 py-2">
<button class="w-full bg-white text-emerald-700 dark:bg-emerald-700 dark:text-white px-5 py-2 rounded-full font-semibold hover:bg-emerald-100 dark:hover:bg-emerald-600 transition-all duration-300 shadow-md">
Order Now
</button>
</div>
</div>
</nav>Componenti correlati
Componente di navigazione Material Design
Un componente di navigazione Material Design semplice e reattivo per le interfacce dei social media che utilizza una combinazione di colori in scala di grigi. Presenta un layout pulito con logo, link di navigazione, barra di ricerca e avatar dell'utente. Include il supporto per la modalità oscura utilizzando il prefisso dark: di Tailwind.
Componente di navigazione vintage retrò
Un componente di navigazione reattivo progettato con un'estetica retrò/vintage ispirata agli stili degli anni '80/'90, caratterizzato da una combinazione di colori pastello. Adatto per le interfacce dei social media, incluso il supporto della modalità scura.
Componente di navigazione
Un componente di navigazione semplice e reattivo per un sito web portfolio, dotato di un'interfaccia utente in modalità scura. Il design utilizza colori complementari e garantisce leggibilità e appeal estetico su schermi di varie dimensioni.