Swiss_International_Navigation_Fashion_Beauty
패션/뷰티 브랜드를 위한 복잡하고 반응이 빠른 내비게이션 구성 요소로, 기업용 블루 색상 구성표로 Swiss/International Typography 디자인 원칙을 준수합니다. 다크 모드 지원 및 여러 대화형 요소가 포함되어 있습니다.
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>관련 구성 요소
미니멀리스트 어스 톤 내비게이션 컴포넌트
흙빛 색 구성표가 있는 미니멀하고 평평한 디자인의 탐색 구성 요소로, 컨설팅/서비스 웹 사이트에 적합합니다. 데스크톱, 태블릿 및 모바일을 위한 반응형 디자인이 포함되어 있으며 다크 모드를 지원합니다.
Brutalism Navigation 구성 요소
브루탈리즘 스타일로 디자인된 반응형 탐색 구성 요소로, 단색 색 구성표를 보여 주며 포트폴리오 웹 사이트에 이상적입니다. 기능에는 고대비의 대담한 레이아웃, Tailwind CSS를 사용한 다크 모드 지원, 드롭다운 또는 버튼 링크와 같은 대화형 요소가 포함됩니다.
GamingNavigationComponent (게임내비게이션컴포넌트)
게임 웹사이트를 위한 복잡하고 반응이 빠른 상단 탐색 모음으로, 유사한 색 구성표를 가진 유기적/자연 테마에서 영감을 받았습니다. 로고, 탐색 링크, 사용자 아바타 및 클릭 유도문안 버튼을 제공하며 완전한 다크 모드를 지원합니다.