3D_Corporate_Blues_Food_Restaurant_Nav
Une barre de navigation complexe, inspirée de la 3D, pour les sites Web de restauration, avec un blues d’entreprise et une réactivité totale avec prise en charge du mode sombre. Intègre des éléments tels qu’un logo, des liens de navigation, une barre de recherche, un avatar d’utilisateur et un panier.
HTML Code
<nav class="bg-gradient-to-r from-blue-600 to-blue-800 dark:from-gray-900 dark:to-gray-950 shadow-lg relative z-50 transform skew-y-1 -translate-y-1 overflow-visible md:skew-y-0 md:translate-y-0">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 relative z-10 transform -skew-y-1 md:skew-y-0">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<a href="#" class="flex-shrink-0 flex items-center group">
<div class="w-10 h-10 bg-blue-400 dark:bg-blue-600 rounded-full flex items-center justify-center shadow-md transform transition-transform duration-300 group-hover:scale-110 group-hover:rotate-12">
<svg class="h-6 w-6 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-1M16.364 18.364l.707.707M12 21v-1m-6.364-1.636l-.707.707M3 12H2m1.636-6.364l.707-.707M10 11h4l-1 5v5h-2v-5l-1-5z"></path>
</svg>
</div>
<span class="ml-3 text-white text-2xl font-extrabold tracking-tight transform transition-transform duration-300 group-hover:px-2 group-hover:-translate-x-1">Food<span class="text-blue-200 dark:text-blue-400">Express</span></span>
</a>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-700 dark:hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-lg font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 shadow-md flex items-center group relative overflow-hidden">
<div class="absolute inset-0 bg-blue-500 dark:bg-gray-800 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
<span class="z-10">Home</span>
</a>
<a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-700 dark:hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 shadow-md flex items-center group relative overflow-hidden">
<div class="absolute inset-0 bg-blue-500 dark:bg-gray-800 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
<span class="z-10">Restaurants</span>
</a>
<a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-700 dark:hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 shadow-md flex items-center group relative overflow-hidden">
<div class="absolute inset-0 bg-blue-500 dark:bg-gray-800 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
<span class="z-10">Deals</span>
</a>
<a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-700 dark:hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 shadow-md flex items-center group relative overflow-hidden">
<div class="absolute inset-0 bg-blue-500 dark:bg-gray-800 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
<span class="z-10">Contact</span>
</a>
</div>
</div>
<div class="hidden md:flex items-center ml-auto space-x-6">
<div class="relative w-64">
<input type="text" placeholder="Search food or restaurants..." class="w-full pl-10 pr-4 py-2 rounded-full bg-blue-700 dark:bg-gray-800 text-white placeholder-blue-200 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 shadow-inner 3d-inset-shadow transition-all duration-300 focus:w-72">
<svg class="h-5 w-5 absolute left-3 top-1/2 -translate-y-1/2 text-blue-300 dark:text-gray-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>
</div>
<button class="p-2 rounded-full bg-blue-700 dark:bg-gray-800 text-blue-200 dark:text-gray-400 hover:text-white hover:bg-blue-600 dark:hover:bg-gray-700 transition shadow-md transform hover:scale-110 relative 3d-button-raised">
<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 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
<span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 dark:text-red-900 transform translate-x-1/2 -translate-y-1/2 bg-red-500 dark:bg-red-400 rounded-full shadow-lg">3</span>
</button>
<div class="relative group">
<button class="flex items-center p-1 rounded-full bg-blue-700 dark:bg-gray-800 text-blue-200 dark:text-gray-400 hover:text-white hover:bg-blue-600 dark:hover:bg-gray-700 transition transform hover:scale-110 shadow-md 3d-button-raised">
<img class="h-8 w-8 rounded-full border-2 border-blue-400 dark:border-gray-600 object-cover" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
<span class="ml-2 text-white font-medium hidden lg:block">Emily R.</span>
<svg class="ml-1 mr-1 h-5 w-5 text-blue-300 dark:text-gray-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="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="hidden group-hover:block absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-xl py-1 transform translate-z-10 transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:translate-y-0 translate-y-2 dark:shadow-light-md-reverse">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700">Sign out</a>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-blue-200 dark:text-gray-400 hover:text-white hover:bg-blue-700 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-800 dark:focus:ring-offset-gray-900 focus:ring-white transition shadow-lg 3d-button-raised" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div class="md:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-blue-700 dark:bg-gray-900 border-t border-blue-600 dark:border-gray-800 shadow-inner transform translate-z-neg-10 z-0">
<a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 shadow-sm">Home</a>
<a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 shadow-sm">Restaurants</a>
<a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 shadow-sm">Deals</a>
<a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 shadow-sm">Contact</a>
<div class="border-t border-blue-500 dark:border-gray-700 my-2 pt-2"></div>
<div class="relative mt-4">
<input type="text" placeholder="Search..." class="w-full pl-10 pr-4 py-2 rounded-full bg-blue-600 dark:bg-gray-800 text-white placeholder-blue-300 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-gray-600 shadow-inner 3d-inset-shadow">
<svg class="h-5 w-5 absolute left-3 top-1/2 -translate-y-1/2 text-blue-400 dark:text-gray-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>
</div>
<button class="flex items-center justify-between w-full px-3 py-2 rounded-md text-blue-100 dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 transition shadow-sm 3d-button-raised mt-2">
<div class="flex items-center">
<svg class="h-6 w-6 mr-2" 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 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
<span>Cart</span>
</div>
<span class="px-2 py-1 text-xs font-bold leading-none text-red-100 dark:text-red-900 bg-red-500 dark:bg-red-400 rounded-full shadow-lg">3</span>
</button>
<div class="flex items-center px-3 py-2 mt-2">
<img class="h-9 w-9 rounded-full border-2 border-blue-400 dark:border-gray-600 object-cover mr-3" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
<div>
<p class="text-white font-medium">Emily R.</p>
<a href="#" class="text-blue-200 dark:text-gray-400 hover:text-white text-sm">View Profile</a>
</div>
</div>
</div>
</div>
<style>
/* Custom 3D-like shadows for a more pronounced effect */
.3d-inset-shadow {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
}
.dark .3d-inset-shadow {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 -2px 4px rgba(255, 255, 255, 0.05);
}
.3d-button-raised {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15);
}
.dark .3d-button-raised {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
}
.shadow-light-md-reverse {
box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
}
.dark .shadow-light-md-reverse {
box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.3), 0 -2px 4px -1px rgba(0, 0, 0, 0.1);
}
/* Further minor adjustments for 3D depth, usually handled well by transform properties */
.translate-z-10 {
transform: translateZ(10px) translateY(0);
}
.translate-z-neg-10 {
transform: translateZ(-10px);
}
</style>
</nav>Composants associés
Composant de la barre de navigation
Composant simple de barre de navigation réactive conçu pour un tableau de bord, doté d’un schéma de couleurs monochromatiques et de micro-interactions. Il comprend un support en mode sombre avec des effets de survol pour des animations engageantes.
Artistic_Sepia_Navigation_Bar
Une barre de navigation simple et réactive avec une esthétique douce, artistique et sépia adaptée aux marques de mode et de beauté, y compris la prise en charge du mode sombre.
Barre de navigation Art Déco
Une barre de navigation réactive, inspirée de l’Art Déco, pour les outils CRM/Business, avec des motifs géométriques, des tons de bijoux riches et la prise en charge du mode sombre. Conçu avec une complexité modérée, y compris des éléments interactifs.