Glassmorphism 햄버거 메뉴
간단하고 반응이 빠른 햄버거 메뉴 구성 요소로, Glassmorphism 디자인, 보색 구성표 및 다크 모드를 지원합니다.
HTML 코드
<nav class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-blue-500 dark:bg-gray-800 dark:bg-opacity-20 p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="text-white text-lg font-semibold">My Blog</div>
<button class="text-white focus:outline-none lg:hidden">
<svg class="w-6 h-6" 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-4 6h4"></path>
</svg>
</button>
<div class="hidden lg:flex space-x-4">
<a href="#" class="text-white hover:text-gray-200">Home</a>
<a href="#" class="text-white hover:text-gray-200">About</a>
<a href="#" class="text-white hover:text-gray-200">Contact</a>
</div>
</div>
</nav>관련 구성 요소
Hamburger Menu 컴포넌트
대시보드에 적합한 3D 스타일로 설계된 반응형 햄버거 메뉴 구성 요소입니다. 그것은 트라이어딕 색 구성표를 통합하고 밝은 테마와 어두운 테마를 모두 지원하는 대화형 요소가 있는 복잡한 인터페이스를 가지고 있습니다.
Hamburger Menu 컴포넌트
Tailwind CSS를 사용하여 브루탈리즘 스타일로 디자인된 반응형 햄버거 메뉴 구성 요소로, 다크 모드 지원과 이미지 및 아바타에 대한 플레이스홀더가 특징입니다.