Hamburger Menu 컴포넌트
글래스모피즘 디자인의 복잡한 반응형 햄버거 메뉴 구성 요소로, 젖빛 유리와 같은 반투명 효과를 특징으로 하며, 작품이나 제품을 전시하는 포트폴리오에 적합합니다. 여기에는 어두운 테마 지원이 포함되며 스타일링을 위해 Tailwind CSS를 사용합니다.
HTML 코드
<div class="relative flex flex-col items-center bg-gray-800 min-h-screen p-4 dark:bg-gray-900">
<button class="hamburger flex items-center justify-center w-10 h-10 bg-white bg-opacity-30 backdrop-blur-md rounded-full shadow-lg hover:bg-opacity-50 dark:bg-gray-700 dark:hover:bg-opacity-50">
<span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
<span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
<span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
</button>
<nav class="absolute left-0 top-12 w-64 bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg transition-transform duration-300 ease-in-out transform -translate-x-full group-hover:translate-x-0 dark:bg-gray-700">
<div class="flex flex-col p-4">
<a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Home</a>
<a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">About</a>
<a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Portfolio</a>
<a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Contact</a>
</div>
</nav>
<div class="mt-5 w-full flex justify-center">
<img src="https://picsum.photos/200/300" alt="Portfolio Item" class="rounded-lg shadow-lg">
</div>
<div class="mt-5 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white bg-opacity-90 shadow-lg">
<p class="ml-2 text-white">John Doe</p>
</div>
</div>관련 구성 요소
Hamburger Menu 컴포넌트
반응형 햄버거 메뉴 구성 요소는 파스텔 색 구성표와 함께 Brutalism 스타일로 디자인되었습니다. 작품이나 제품을 보여주는 포트폴리오에 적합합니다.
아르데코 스포츠/피트니스 햄버거 메뉴
복잡하고 반응이 빠른 햄버거 메뉴 구성 요소는 아르데코 미학, 파스텔 색조 구성표, 다크 모드 지원을 특징으로 하며 스포츠 및 피트니스 애플리케이션에 적합합니다.