3D_Corporate_Blues_Food_Restaurant_Nav
一个复杂的 3D 风格导航栏，适用于食品/餐厅网站，具有企业忧郁和完全响应能力，并支持深色模式。包含徽标、导航链接、搜索栏、用户头像和购物车等元素。
HTML 代码
<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>