Navigation minimaliste dans les restaurants et les restaurants
Un composant de navigation minimaliste et réactif pour les sites Web d’alimentation et de restaurants, avec des tons de bijoux, la prise en charge du mode sombre et un design plat et épuré. Comprend un logo, des liens de navigation et un bouton d’appel à l’action, avec un menu de hamburgers adapté aux mobiles.
HTML Code
<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>Composants associés
Navigation Monospace pour le secteur de la santé
Il s’agit d’un composant de navigation complexe et réactif pour les applications médicales/de santé, doté d’un design inspiré du monospace/développeur avec des neutres chauds, la prise en charge du mode sombre et des éléments interactifs.
Composant de navigation rétro du tableau de bord
Composant de navigation rétro/vintage pour tableau de bord avec des couleurs vives, une complexité modérée, une réactivité et une prise en charge du thème sombre.
Composant de navigation skeuomorphe
Un composant de navigation skeuomorphe conçu pour imiter des éléments du monde réel tels qu’un panneau de commande physique ou un tableau de bord. Dispose d’un design réactif, d’effets de survol qui simulent l’appui sur des boutons physiques et d’une prise en charge du thème sombre. La navigation comprend des ombres, des dégradés et des textures subtils pour créer une apparence tactile 3D rappelant les interfaces physiques.