Componente de Mega Menú de Glassmorphism
Mega menú de Glassmorphism para interfaces de tablero con esquema de color triádico. Cuenta con un efecto de vidrio esmerilado, diseño receptivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
Código 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>Componentes relacionados
Componente Mega Menú
Un Mega Componente de Menú responsivo diseñado con estilo Glassmorphism, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, que admite temas oscuros usando Tailwind CSS.
Brutalist_Triadic_Simple_Mega_Menu
Un mega menú simple de estilo brutalista diseñado para un blog o sitio de contenido, con un esquema de color triádico y una capacidad de respuesta completa con soporte para modo oscuro.
Componente Mega Menú
Un mega componente de menú receptivo diseñado con un aspecto 3D, que incluye efectos de profundidad y soporte para temas oscuros utilizando Tailwind CSS. El componente presenta imágenes y avatares de usuario de servicios de marcador de posición.