Glassmorphism Mega Menu Component
Glassmorphism Mega Menu pour les interfaces de tableau de bord avec palette de couleurs triadique. Dispose d’un effet de verre givré, d’un design réactif et d’une prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<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>Composants associés
Composant Mega Menu
Un composant de méga menu complexe et réactif conçu avec une esthétique monospace/développeur et une palette de couleurs neutres chaudes, adapté aux sites Web de conseil/services professionnels. Inclut la prise en charge du mode sombre.
Composant Mega Menu - Interface utilisateur en mode sombre (Finance/Banque)
Un méga composant de menu simple et réactif conçu pour les interfaces finance/banque, avec une interface utilisateur en mode sombre avec des neutres froids. Comprend des sections importantes pour les liens populaires, les services de compte et l’accès rapide.
Composant Mega Menu
Un composant de méga menu réactif conçu en mettant l’accent sur les micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.