전자 상거래, 산업 내비게이션
원자재와 노출된 요소가 미학적으로 특징적인 복잡한 산업 스타일의 전자 상거래 내비게이션 구성 요소입니다. 밝은 액센트가 있는 흑백 구성표가 특징이며 다크 모드 지원으로 완벽하게 반응합니다.
HTML 코드
<header class="bg-white dark:bg-gray-950 shadow-md border-b-2 border-gray-200 dark:border-gray-800">
<div class="container mx-auto px-4 py-3 flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
<!-- Logo/Brand Section -->
<div class="flex items-center flex-shrink-0">
<a href="#" class="text-gray-900 dark:text-white text-3xl font-extrabold tracking-tight uppercase font-mono">
<span class="text-orange-500">PRO</span>DUCTS
</a>
</div>
<!-- Main Navigation & Search -->
<div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8 w-full md:w-auto">
<nav class="hidden md:flex space-x-6 lg:space-x-8">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
New Arrivals
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
Categories
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
Sale
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
About Us
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
</a>
</nav>
<div class="relative w-full md:w-80 lg:w-96">
<input type="text" placeholder="Search products..." class="w-full py-2 pl-10 pr-4 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white border-2 border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all duration-300 ease-in-out font-sans placeholder-gray-500 dark:placeholder-gray-400">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400" width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
<!-- User Actions (Cart, Account, etc.) -->
<div class="flex items-center space-x-6 pl-4 border-l-2 border-gray-200 dark:border-gray-800 hidden lg:flex">
<a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
</svg>
<span class="sr-only">Account</span>
</a>
<a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48zM17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48z"></path>
</svg>
<span class="absolute top-0 right-0 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-orange-500 rounded-full">3</span>
<span class="sr-only">Shopping Cart</span>
</a>
<button type="button" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out" onclick="document.documentElement.classList.toggle('dark')" aria-label="Toggle dark mode">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path class="dark:hidden" d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25zM12 19.5a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V20.25a.75.75 0 01.75-.75zM19.5 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5h-2.25a.75.75 0 01-.75-.75zM2.25 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3A.75.75 0 012.25 12zM16.816 6.004a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 16.892a.75.75 0 01-1.056.077l-1.597-1.597a.75.75 0 01.077-1.056.75.75 0 011.056.077l1.597 1.597a.75.75 0 01-.077 1.056zM18.913 18.913a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 7.108a.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077.75.75 0 01-.077 1.056L6.004 7.185a.75.75 0 01-1.056-.077zM12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z"></path>
<path class="hidden dark:block" d="M9.599 3.099a.75.75 0 01.52.193 7.5 7.5 0 008.208 8.208.75.75 0 01.193.52c0 .99-.187 1.92-.513 2.766L20.082 18l-.943.943-4.053-4.052a7.5 7.5 0 00-6.713-13.687.75.75 0 01.52-.193zM12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25z"></path>
</svg>
<span class="sr-only">Toggle Dark Mode</span>
</button>
</div>
<!-- Mobile Menu Toggle -->
<div class="md:hidden flex items-center space-x-4">
<button type="button" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out" onclick="document.documentElement.classList.toggle('dark')" aria-label="Toggle dark mode">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path class="dark:hidden" d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25zM12 19.5a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V20.25a.75.75 0 01.75-.75zM19.5 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5h-2.25a.75.75 0 01-.75-.75zM2.25 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3A.75.75 0 012.25 12zM16.816 6.004a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 16.892a.75.75 0 01-1.056.077l-1.597-1.597a.75.75 0 01.077-1.056.75.75 0 011.056.077l1.597 1.597a.75.75 0 01-.077 1.056zM18.913 18.913a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 7.108a.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077.75.75 0 01-.077 1.056L6.004 7.185a.75.75 0 01-1.056-.077zM12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z"></path>
<path class="hidden dark:block" d="M9.599 3.099a.75.75 0 01.52.193 7.5 7.5 0 008.208 8.208.75.75 0 01.193.52c0 .99-.187 1.92-.513 2.766L20.082 18l-.943.943-4.053-4.052a7.5 7.5 0 00-6.713-13.687.75.75 0 01.52-.193zM12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25z"></path>
</svg>
<span class="sr-only">Toggle Dark Mode</span>
</button>
<button id="mobile-menu-button" class="text-gray-700 dark:text-gray-300 focus:outline-none focus:text-orange-500 dark:focus:text-orange-500">
<svg class="w-8 h-8" 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="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu (initially hidden) -->
<div id="mobile-menu" class="hidden md:hidden px-4 pt-2 pb-4 space-y-2 bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">New Arrivals</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">Categories</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">Sale</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">About Us</a>
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200 pt-2 border-t border-gray-300 dark:border-gray-700">
<a href="#" class="flex items-center px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
</svg>
Account
</a>
<a href="#" class="flex items-center px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48z"></path>
</svg>
Cart
<span class="ml-1 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white transform bg-orange-500 rounded-full">3</span>
</a>
</div>
</div>
</header>
<script>
// Basic JavaScript for mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu when a link inside is clicked (optional)
mobileMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
}
});
</script>관련 구성 요소
Navigation Enhancement 구성 요소
Tailwind CSS를 사용하여 다크 모드용으로 설계된 반응형 탐색 구성 요소로, 로고, 이미지 및 아바타에 대한 자리 표시자가 있습니다.
종이/인쇄물에서 영감을 받은 정부 내비게이션
정부/공공 웹 사이트를 위한 종이/인쇄물에서 영감을 받은 복잡한 탐색 구성 요소로, 세피아/갈색 톤, 응답성 및 다크 모드 지원을 특징으로 합니다. 여기에는 기본 탐색, 검색 및 '빠른 링크' 또는 '서비스' 섹션이 포함됩니다.