Navigation Enhancement Components 구성 요소
기업 웹 사이트를 위한 복잡하고 잔인한 스타일의 탐색 구성 요소로, 유사한 색 구성표, 반응형 디자인 및 다크 모드 지원을 제공합니다. 특이한 레이아웃과 높은 대비가 특징입니다.
HTML 코드
<nav class="bg-blue-200 dark:bg-gray-900 p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center flex-wrap">
<div class="text-xl font-bold text-blue-800 dark:text-blue-200 uppercase tracking-widest">Company Name</div>
<div class="block lg:hidden">
<button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-blue-800 border-blue-800 dark:text-blue-200 dark:border-blue-200">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block" id="nav-content">
<ul class="lg:flex items-center justify-end flex-1">
<li class="mr-6 my-2 lg:my-0">
<a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Home</a>
</li>
<li class="mr-6 my-2 lg:my-0">
<a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">About</a>
</li>
<li class="mr-6 my-2 lg:my-0">
<a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Services</a>
</li>
<li class="mr-6 my-2 lg:my-0">
<a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Contact</a>
</li>
<li class="my-2 lg:my-0">
<div class="relative">
<button class="bg-blue-800 dark:bg-blue-200 text-blue-200 dark:text-blue-800 font-bold uppercase py-2 px-4 border border-blue-800 dark:border-blue-200 rounded">
Dropdown
</button>
<div class="absolute right-0 mt-2 w-48 bg-blue-200 dark:bg-gray-700 rounded shadow-lg py-2 z-10 hidden">
<a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 1</a>
<a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 2</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>관련 구성 요소
종이/인쇄물에서 영감을 받은 정부 내비게이션
정부/공공 웹 사이트를 위한 종이/인쇄물에서 영감을 받은 복잡한 탐색 구성 요소로, 세피아/갈색 톤, 응답성 및 다크 모드 지원을 특징으로 합니다. 여기에는 기본 탐색, 검색 및 '빠른 링크' 또는 '서비스' 섹션이 포함됩니다.
Navigation Enhancement 구성 요소
Tailwind CSS를 사용하여 머티리얼 디자인 컨셉으로 디자인된 반응형 탐색 구성요소로, 어두운 테마 지원 및 플레이스홀더 이미지를 제공합니다.
Navigation Enhancement 구성 요소
glassmorphism에서 영감을 받은 탐색 구성 요소는 어스 톤과 다크 모드를 지원하는 포트폴리오 작업 및 제품을 보여주기 위해 설계되었습니다. 이 구성 요소는 젖빛 유리 효과, 반응형 디자인 및 최소한의 요소를 특징으로 합니다.