Glassmorphism 메가 메뉴 컴포넌트
Glassmorphism Mega Menu for Dashboard는 트라이어딕 색 구성표와 인터페이스합니다. 젖빛 유리 효과, 반응형 디자인, Tailwind CSS를 사용한 다크 모드 지원이 특징입니다.
HTML 코드
<nav class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white py-4 px-6 sticky top-0 z-50 dark:bg-black dark:bg-opacity-30">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-xl font-bold text-blue-600 dark:text-blue-400">Dashboard</a>
<div class="hidden md:flex space-x-6">
<div class="relative group">
<button class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 cursor-default">Data</button>
<div class="absolute hidden group-hover:block backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white p-6 rounded-lg shadow-lg mt-2 dark:bg-black dark:bg-opacity-30">
<div class="grid grid-cols-2 gap-4">
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Overview</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Reports</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Analytics</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Trends</a>
</div>
</div>
</div>
<div class="relative group">
<button class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 cursor-default">Management</button>
<div class="absolute hidden group-hover:block backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white p-6 rounded-lg shadow-lg mt-2 dark:bg-black dark:bg-opacity-30">
<div class="grid grid-cols-2 gap-4">
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Users</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Settings</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Permissions</a>
</div>
</div>
</div>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Settings</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Help</a>
</div>
<button class="md:hidden text-gray-800 dark:text-gray-200 focus:outline-none">
<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 12h16M4 18h16"></path></svg>
</button>
</div>
<div class="hidden md:hidden mobile-menu">
<a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Data</a>
<a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Management</a>
<a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Settings</a>
<a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Help</a>
</div>
</nav>관련 구성 요소
메가 메뉴 구성 요소 - 소셜 미디어
반응형 다크 모드 지원 메가 메뉴 구성 요소는 소셜 미디어 애플리케이션용으로 설계되었으며, 그레이스케일 색 구성표의 머티리얼 디자인 미학을 따릅니다. 여기에는 트렌드, 카테고리 및 프로필에 대한 섹션이 포함되어 있습니다.
Brutalist_Triadic_Simple_Mega_Menu
블로그 또는 콘텐츠 사이트를 위해 설계된 단순하고 브루탈리즘 스타일의 메가 메뉴로, 트라이어딕 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.