Swiss_International_Navigation_Fashion_Beauty
Eine komplexe, reaktionsschnelle Navigationskomponente für Mode-/Beauty-Marken, die den Designprinzipien der schweizerischen/internationalen Typografie mit einem blauen Farbschema entspricht. Enthält Unterstützung für den Dunkelmodus und mehrere interaktive Elemente.
HTML-Code
<!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>Verwandte Komponenten
Navigationskomponente 43
Eine reaktionsschnelle Navigationskomponente, die skeuomorphen Designprinzipien folgt, mit digitalen Elementen, die ihre realen Gegenstücke nachahmen, mit Unterstützung für dunkle Themen.
Skeuomorphe Navigationskomponente
Eine Navigationskomponente im skeuomorphen Stil mit einem komplementären Farbschema, das für ein Dashboard mit Datenvisualisierung und Bedienfeldern geeignet ist. Es enthält interaktive Elemente für die Benutzerbindung.
Komponente "Navigationskomponenten"
Eine reaktionsschnelle Navigationsleiste mit Unterstützung für den Dunkelmodus.