Swiss_International_Navigation_Fashion_Beauty
一个复杂的响应式导航组件，适用于时尚/美容品牌，遵循瑞士/国际排版设计原则，采用企业蓝色配色方案。包括深色模式支持和多个交互式元素。
HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Component</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
'corporate-blue-50': '#EBF2FA',
'corporate-blue-100': '#D4E2F1',
'corporate-blue-200': '#A6C8E6',
'corporate-blue-300': '#7AB0DB',
'corporate-blue-400': '#4D96D0',
'corporate-blue-500': '#217CC5',
'corporate-blue-600': '#1C69A1',
'corporate-blue-700': '#175680',
'corporate-blue-800': '#124360',
'corporate-blue-900': '#0D3040',
},
},
},
}
</script>
<style>
/* Basic styles for demonstration, normally set by Tailwind config */
body {
font-family: 'Helvetica Neue', 'Arial', sans-serif;
}
/* Custom hover effect for mega menu */
.group:hover .group-hover\\:block {
display: block;
}
</style>
</head>
<body class="bg-neutral-50 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 min-h-screen">
<nav class="bg-white dark:bg-neutral-800 shadow-md py-4 transition-colors duration-300 w-full z-50 relative">
<div class="container mx-auto px-4 flex justify-between items-center">
<!-- Logo -->
<a href="#" class="text-3xl font-bold tracking-tight text-corporate-blue-700 dark:text-corporate-blue-300 uppercase">
FASHION<span class="text-corporate-blue-500 dark:text-corporate-blue-500">LAB</span>
</a>
<!-- Desktop Menu -->
<ul class="hidden md:flex space-x-8 lg:space-x-12 text-lg font-medium tracking-tight h-16 items-center">
<li class="group relative h-full flex items-center">
<a href="#" class="text-neutral-700 dark:text-neutral-200 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition duration-300 py-4 border-b-2 border-transparent group-hover:border-corporate-blue-500 dark:group-hover:border-corporate-blue-400">
Shop
</a>
<div class="absolute hidden group-hover:block w-full top-full left-0 mt-0 py-6 bg-white dark:bg-neutral-800 shadow-xl rounded-b-lg border-t border-solid border-corporate-blue-100 dark:border-neutral-700 transition duration-300 ease-in-out transform origin-top ">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 px-6">
<div class="">
<h3 class="font-bold text-lg mb-4 text-corporate-blue-700 dark:text-corporate-blue-300">Women's Apparel</h3>
<ul class="space-y-2 text-neutral-600 dark:text-neutral-300">
<li><a href="#" class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Dresses</a></li>
<li><a href="#" class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Tops & Blouses</a></li>
<li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Skirts & Pants</a></li>
<li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Outerwear</a></li>
<li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Activewear</a></li>
<li><a class="font-bold text-corporate-blue-600 dark:text-corporate-blue-400 hover:underline transition">View All Womens</a></li>
</ul>
</div>
<div class="">
<h3 class="font-bold text-lg mb-4 text-corporate-blue-700 dark:text-corporate-blue-300">Men's Collection</h3>
<ul class="space-y-2 text-neutral-600 dark:text-neutral-300">
<li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Shirts</a></li>
<li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Pants & Shorts</a></li>
<li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Jackets</a></li>
<li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Sportswear</a></li>
<li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Suits</a></li>
<li><a class="font-bold text-corporate-blue-600 dark:text-corporate-blue-400 hover:underline transition">View All Mens</a></li>
</ul>
</div>
<div class="">
<h3 class="font-bold text-lg mb-4 text-corporate-blue-700 dark:text-corporate-blue-300">Beauty & Wellness</h3>
<ul class="space-y-2 text-neutral-600 dark:text-neutral-300">
<li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Skincare</a></li>
<li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Makeup</a></li>
<li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Fragrances</a></li>
<li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Haircare</a></li>
<li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Body & Bath</a></li>
<li><a class="font-bold text-corporate-blue-600 dark:text-corporate-blue-400 hover:underline transition">Discover All Beauty</a></li>
</ul>
</div>
<div class="">
<h3 class="font-bold text-lg mb-4 text-corporate-blue-700 dark:text-corporate-blue-300 hidden lg:block">Featured Styles</h3>
<a href="#" class="block overflow-hidden rounded-lg shadow-lg relative lg:h-48 h-32">
<img src="https://picsum.photos/300/200?random=1" alt="Placeholder image for new arrivals" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4">
<span class="text-white text-xl font-bold tracking-tight">New Arrivals</span>
</div>
</a>
<p class="text-sm text-neutral-500 dark:text-neutral-400 mt-2">Explore the latest trends.</p>
</div>
</div>
</div>
</li>
<li class="group relative h-full flex items-center">
<a href="#" class="text-neutral-700 dark:text-neutral-200 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition duration-300 py-4 border-b-2 border-transparent group-hover:border-corporate-blue-500 dark:group-hover:border-corporate-blue-400">Categories</a>
</li>
<li class="group relative h-full flex items-center">
<a href="#" class="text-neutral-700 dark:text-neutral-200 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition duration-300 py-4 border-b-2 border-transparent group-hover:border-corporate-blue-500 dark:group-hover:border-corporate-blue-400">Brands</a>
<div class="absolute hidden group-hover:block w-48 top-full left-0 mt-0 py-3 bg-white dark:bg-neutral-800 shadow-xl rounded-b-lg border-t border-solid border-corporate-blue-100 dark:border-neutral-700 transition duration-300 ease-in-out transform origin-top ">
<ul class="text-sm space-y-2 text-neutral-600 dark:text-neutral-300 px-4">
<li><a href="#" class="block hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Brand A</a></li>
<li><a href="#" class="block hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Brand B</a></li>
<li><a href="#" class="block hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Brand C</a></li>
<li><a href="#" class="block hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Sustainable Brands</a></li>
<li><a href="#" class="block text-corporate-blue-600 dark:text-corporate-blue-400 font-bold hover:underline transition">View All Brands</a></li>
</ul>
</div>
</li>
<li class="group relative h-full flex items-center transition duration-300">
<a href="#" class="text-neutral-700 dark:text-neutral-200 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition duration-300 py-4 border-b-2 border-transparent group-hover:border-corporate-blue-500 dark:group-hover:border-corporate-blue-400">Campaigns</a>
</li>
</ul>
<!-- Icons / Utilities -->
<div class="flex items-center space-x-5 lg:space-x-6">
<button aria-label="Search" class="text-neutral-600 dark:text-neutral-300 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
<a href="#" aria-label="Favorites" class="text-neutral-600 dark:text-neutral-300 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition relative">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
<span class="absolute -top-1 -right-1 bg-corporate-blue-500 dark:bg-corporate-blue-400 text-white text-xs font-bold rounded-full h-4 w-4 flex items-center justify-center">3</span>
</a>
<a href="#" aria-label="Shopping Cart" class="text-neutral-600 dark:text-neutral-300 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition relative">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
<span class="absolute -top-1 -right-1 bg-corporate-blue-500 dark:bg-corporate-blue-400 text-white text-xs font-bold rounded-full h-4 w-4 flex items-center justify-center">7</span>
</a>
<div class="group relative hidden md:block">
<button aria-label="User account" class="flex items-center space-x-2 text-neutral-600 dark:text-neutral-300 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-corporate-blue-300 dark:border-corporate-blue-600">
<span class="hidden lg:block text-base font-medium">My Account</span>
</button>
<div class="absolute hidden group-hover:block w-48 top-full right-0 mt-2 py-2 bg-white dark:bg-neutral-800 shadow-xl rounded-lg border border-solid border-corporate-blue-100 dark:border-neutral-700 transition duration-300 ease-in-out transform origin-top ">
<a href="#" class="block px-4 py-2 text-sm text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 transition">Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 transition">Orders</a>
<a href="#" class="block px-4 py-2 text-sm text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 transition">Addresses</a>
<div class="border-t border-solid border-corporate-blue-100 dark:border-neutral-700 my-1"></div>
<a href="#" class="block px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 transition">Sign Out</a>
</div>
</div>
<!-- Dark mode toggle -->
<button id="theme-toggle" aria-label="Toggle dark mode" class="text-neutral-600 dark:text-neutral-300 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">
<svg id="theme-toggle-light-icon" class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h1M3 12h1m15.325-7.79l-.707-.707M4.372 19.372l-.707-.707M19.071 4.929l-.707.707M4.929 19.071l-.707.707M18 12a6 6 0 11-12 0 6 6 0 0112 0z" />
</svg>
<svg id="theme-toggle-dark-icon" class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
<!-- Mobile Menu Button -->
<button id="mobile-menu-button" aria-label="Open mobile menu" class="md:hidden text-neutral-600 dark:text-neutral-300 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
<!-- Mobile Menu (hidden by default) -->
<div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-white dark:bg-neutral-800 shadow-lg pb-6 transform -translate-y-full opacity-0 transition-all duration-300 ease-in-out">
<div class="container mx-auto px-4 py-4 space-y-4 text-base font-medium">
<a href="#" class="block px-4 py-2 text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 rounded-md transition">Shop</a>
<a href="#" class="block px-4 py-2 text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 rounded-md transition">Categories</a>
<a href="#" class="block px-4 py-2 text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 rounded-md transition">Brands</a>
<a href="#" class="block px-4 py-2 text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 rounded-md transition">Campaigns</a>
<div class="border-t border-solid border-corporate-blue-100 dark:border-neutral-700 mt-4 pt-4 space-y-3">
<a href="#" class="block px-4 py-2 text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 rounded-md transition flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-7 h-7 rounded-full border border-corporate-blue-300 dark:border-corporate-blue-600">
<span>My Account</span>
</a>
<a href="#" class="block px-4 py-2 text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 rounded-md transition">Favorites</a>
<a href="#" class="block px-4 py-2 text-red-600 dark:text-red-400 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 rounded-md transition">Sign Out</a>
</div>
</div>
</div>
</nav>
<div class="h-96 flex items-center justify-center bg-corporate-blue-50 dark:bg-corporate-blue-900 transition-colors duration-300">
<h1 class="text-4xl lg:text-6xl font-extrabold text-corporate-blue-700 dark:text-corporate-blue-200 text-center tracking-tighter">Explore Our Latest Collections</h1>
</div>
<script>
// Mobile menu toggle logic
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
const isMenuOpen = mobileMenu.classList.contains('translate-y-0');
if (isMenuOpen) {
mobileMenu.classList.remove('translate-y-0', 'opacity-100', 'pointer-events-auto');
mobileMenu.classList.add('-translate-y-full', 'opacity-0', 'pointer-events-none');
} else {
mobileMenu.classList.remove('-translate-y-full', 'opacity-0', 'pointer-events-none');
mobileMenu.classList.add('translate-y-0', 'opacity-100', 'pointer-events-auto');
}
mobileMenu.classList.toggle('hidden'); // Toggles hidden class after transition
});
// Dark mode toggle logic
const themeToggleBtn = document.getElementById('theme-toggle');
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
// On initial load, check for dark mode preference
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
themeToggleDarkIcon.classList.remove('hidden');
themeToggleLightIcon.classList.add('hidden');
} else {
document.documentElement.classList.remove('dark');
themeToggleLightIcon.classList.remove('hidden');
themeToggleDarkIcon.classList.add('hidden');
}
themeToggleBtn.addEventListener('click', function() {
// Toggle icons
themeToggleLightIcon.classList.toggle('hidden');
themeToggleDarkIcon.classList.toggle('hidden');
// If set via localStorage previously
if (localStorage.getItem('color-theme')) {
if (localStorage.getItem('color-theme') === 'light') {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
}
} else { // If not set via localStorage previously
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
}
}
});
</script>
</body>
</html>