Composant Mega Menu
Un composant de méga menu réactif conçu dans le style Glassmorphism, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou, prenant en charge les thèmes sombres à l’aide de Tailwind CSS.
HTML Code
<div class="relative bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<div class="absolute inset-0 bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 backdrop-blur-md"></div>
<nav class="relative z-10">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<div class="text-2xl font-bold text-gray-800 dark:text-white">Brand</div>
<div class="hidden lg:flex space-x-8">
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Home</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">About</a>
<div class="relative group">
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Services</a>
<div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-900 rounded-lg shadow-lg group-hover:block">
<div class="p-4">
<a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Web Design</a>
<a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">SEO Services</a>
<a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Marketing</a>
</div>
</div>
</div>
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Contact</a>
</div>
<div class="lg:hidden">
<button class="text-gray-800 dark:text-white 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 12h16m-7 6h7"/></svg>
</button>
</div>
</div>
</div>
</nav>
<div class="hidden lg:block relative overflow-hidden">
<img class="object-cover w-full h-64 opacity-50" src="https://picsum.photos/800/400" alt="Mega Menu Background">
<div class="absolute inset-0 flex items-center justify-center">
<div class="bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 p-6 rounded-lg shadow-lg">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to Our Services</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">Explore our range of services tailored for your business needs.</p>
<a href="#" class="mt-4 inline-block bg-blue-500 text-white font-bold py-2 px-4 rounded-lg shadow hover:bg-blue-600">Get Started</a>
</div>
</div>
</div>
<footer class="text-center py-4 bg-gray-200 dark:bg-gray-700">
<p class="text-gray-800 dark:text-white">© 2023 My Company</p>
</footer>
</div>Composants associés
Rétro Vintage Mega Menu
Un composant de méga menu réactif conçu dans un style rétro/vintage inspiré de l’esthétique des années 80 et 90, avec une prise en charge du thème sombre et des images de remplacement.
Composant Mega Menu
Un composant de méga menu de style Neumorphisme avec une palette de couleurs monochromatiques conçu pour les blogs et la consommation de contenu. Il prend en charge la conception réactive avec le mode sombre.