Composant de menu Neumorphic Mega
Un composant de méga menu neumorphe avec un comportement réactif et une prise en charge du mode sombre.
HTML Code
<nav class="neumorphic-mega-menu bg-gray-200 dark:bg-gray-800 transition duration-500 ease-in-out">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="text-xl font-bold text-gray-800 dark:text-white">My Logo</div>
<div class="hidden md:flex space-x-8">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
<div class="group relative">
<button class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out">Products</button>
<div class="absolute left-0 mt-2 w-64 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transform scale-95 group-hover:scale-100 transition duration-300 ease-in-out">
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 1</a>
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 2</a>
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 3</a>
</div>
</div>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
</div>
<button class="md:hidden text-gray-700 dark:text-gray-300 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"></path></svg>
</button>
</div>
<div class="md:hidden mobile-menu hidden">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">Home</a>
<div class="group relative">
<button class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 w-full text-left">Products</button>
<div class="pl-4">
<a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 1</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 2</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 3</a>
</div>
</div>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">About</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">Contact</a>
</div>
</nav>
<style>
.neumorphic-mega-menu {
box-shadow: 5px 5px 10px #b0b0b0, -5px -5px 10px #ffffff;
}
.dark .neumorphic-mega-menu {
box-shadow: 5px 5px 10px #444444, -5px -5px 10px #333333;
}
</style>Composants associés
Composant Mega Menu - Neumorphic Vibrant E-commerce
Un méga composant de menu complexe et réactif conçu avec un style de commerce électronique neumorphe et dynamique. Comprend plusieurs colonnes, des exemples d’images et des listes de catégories, avec une prise en charge complète du mode sombre.
ArtDécoPhotographieMegaMenu
Un méga composant de menu simple et réactif conçu dans un style Art déco avec des tons de bijoux, adapté aux portfolios de photographie. Inclut la prise en charge du mode sombre.
Composant Mega Menu - Neon Glow
Un composant de méga menu simple et réactif avec des effets de néon/lueur, des couleurs neutres chaudes et la prise en charge du mode sombre, adapté aux systèmes de réservation.