전자 상거래 자재 디자인 탐색
머티리얼 디자인(Material Design)에서 영감을 받은 복잡하고 반응이 빠른 단색 전자상거래 내비게이션 컴포넌트로, 검색, 장바구니, 사용자 프로필, 다크 모드를 지원하는 카테고리 링크를 제공합니다.
HTML 코드
<header class="bg-white dark:bg-gray-900 shadow-md font-sans w-full">
<div class="container mx-auto px-4 py-3 sm:py-4 flex flex-wrap items-center justify-between">
<!-- Logo & Brand Name -->
<a href="#" class="flex items-center text-gray-900 dark:text-white text-2xl font-bold tracking-tight">
<svg class="h-8 w-8 mr-2 text-indigo-600 dark:text-indigo-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3.5 16.5c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5zm7 0c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5zm-3.5-5c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5z"/>
</svg>
ShopHere
</a>
<!-- Search Bar (Desktop/Tablet) -->
<div class="hidden md:flex flex-grow max-w-lg mx-4">
<div class="relative w-full">
<input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400" 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"/>
</svg>
</div>
</div>
</div>
<!-- Right-aligned Icons (Profile, Cart, etc.) -->
<div class="flex items-center space-x-4 sm:space-x-6">
<!-- User Profile Dropdown -->
<div class="relative group">
<button class="flex items-center p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</button>
<div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform scale-95 group-hover:scale-100 origin-top-right">
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">My Profile</a>
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Orders</a>
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Wishlist</a>
<hr class="my-1 border-gray-200 dark:border-gray-700">
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Sign Out</a>
</div>
</div>
<!-- Cart Icon -->
<a href="#" class="relative p-2 rounded-full text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"/>
</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 bg-red-600 rounded-full dark:bg-red-500 dark:text-white transform translate-x-1/2 -translate-y-1/2">3</span>
</a>
<!-- Mobile Menu Button -->
<div class="md:hidden">
<button id="mobile-menu-button" class="p-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
<path id="mobile-menu-open-icon" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
<path id="mobile-menu-close-icon" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
</div>
</div>
<!-- Mobile Search Bar -->
<div class="w-full mt-3 md:hidden">
<div class="relative w-full">
<input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400" 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"/>
</svg>
</div>
</div>
</div>
</div>
<!-- Main Navigation Links -->
<nav id="main-navigation" class="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 h-0 hidden md:flex md:h-auto overflow-hidden transition-all duration-300 ease-linear-out md:overflow-visible" style="opacity: 0;">
<div class="container mx-auto px-4 py-2">
<ul class="flex flex-col md:flex-row md:justify-around lg:justify-center md:space-x-8 lg:space-x-12">
<li>
<a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0">
Home
</a>
</li>
<li class="relative group">
<a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0 flex items-center">
Categories
<svg class="ml-1 h-4 w-4 transform group-hover:rotate-180 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</a>
<div class="absolute left-0 mt-2 py-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform scale-95 group-hover:scale-100 origin-top-left">
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Electronics</a>
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Apparel</a>
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Home Goods</a>
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Books</a>
</div>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0">
Deals
</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0">
New Arrivals
</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0">
Contact
</a>
</li>
</ul>
</div>
</nav>
</header>
<script>
document.addEventListener('DOMContentLoaded', () => {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mainNavigation = document.getElementById('main-navigation');
const openIcon = document.getElementById('mobile-menu-open-icon');
const closeIcon = document.getElementById('mobile-menu-close-icon');
mobileMenuButton.addEventListener('click', () => {
const isHidden = mainNavigation.classList.contains('hidden');
if (isHidden) {
mainNavigation.classList.remove('hidden');
mainNavigation.style.height = mainNavigation.scrollHeight + 'px'; // Set height for smooth transition
mainNavigation.style.opacity = '1';
openIcon.classList.add('hidden');
closeIcon.classList.remove('hidden');
} else {
mainNavigation.style.height = '0'; // Collapse height
mainNavigation.style.opacity = '0';
// Wait for transition to complete before hiding fully
mainNavigation.addEventListener('transitionend', () => {
if (mainNavigation.style.height === '0px') {
mainNavigation.classList.add('hidden');
}
}, { once: true });
openIcon.classList.remove('hidden');
closeIcon.classList.add('hidden');
}
});
// Handle window resize to collapse/show menu for desktop
window.addEventListener('resize', () => {
if (window.innerWidth >= 768) { // md breakpoint
mainNavigation.classList.remove('hidden');
mainNavigation.style.height = 'auto'; // Reset height for desktop
mainNavigation.style.opacity = '1';
openIcon.classList.remove('hidden'); // Ensure menu button is in 3-line state on desktop
closeIcon.classList.add('hidden');
} else {
if (!mainNavigation.classList.contains('hidden')) {
// If menu is open on mobile, collapse it when resizing to smaller than md
mainNavigation.style.height = '0';
mainNavigation.style.opacity = '0';
mainNavigation.addEventListener('transitionend', () => {
if (mainNavigation.style.height === '0px') {
mainNavigation.classList.add('hidden');
}
}, { once: true });
openIcon.classList.remove('hidden');
closeIcon.classList.add('hidden');
}
}
});
});
</script>관련 구성 요소
브루탈리즘 전자상거래 내비게이션
전자 상거래를 위한 브루탈리즘 스타일의 탐색 구성 요소로, Tailwind CSS로 구축된 회색조 색 구성표, 복잡한 레이아웃, 응답성 및 다크 모드 지원을 특징으로 합니다.
3D_Candy_Finance_Navigation
금융/뱅킹 애플리케이션을 위한 간단하고 반응이 빠른 탐색 구성 요소로, 캔디/달콤한 색 구성표와 미묘한 3D 디자인 요소를 특징으로 하며 다크 모드를 지원합니다.
스큐어모픽 내비게이션 컴포넌트(Skeuomorphic Navigation Component)
스큐어모픽 스타일로 디자인된 탐색 구성 요소로, 생생한 색상과 블로그 콘텐츠에 적합한 반응형 레이아웃을 특징으로 합니다. 여기에는 호버 효과와 같은 대화형 기능이 포함되어 있으며 다크 모드에 최적화되어 있습니다.