Méga Menu en mode sombre simple
Un composant de méga-menu simple et réactif pour les sites Web d’entreprise utilisant le mode sombre avec une palette de couleurs complémentaire. Construit avec Tailwind CSS, avec prise en charge du thème sombre et sans JavaScript.
HTML Code
<header class="bg-gray-900 text-gray-300">
<nav class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<a href="#" class="text-xl font-bold text-white">Your Logo</a>
<div class="hidden md:flex space-x-8">
<div class="relative group">
<button class="hover:text-white">Menu 1</button>
<div class="absolute z-10 hidden group-hover:block bg-gray-800 p-6 rounded-md">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<h3 class="font-bold text-white mb-2">Category 1</h3>
<ul>
<li><a href="#" class="block hover:text-white py-1">Link 1</a></li>
<li><a href="#" class="block hover:text-white py-1">Link 2</a></li>
<li><a href="#" class="block hover:text-white py-1">Link 3</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-2">Category 2</h3>
<ul>
<li><a href="#" class="block hover:text-white py-1">Link A</a></li>
<li><a href="#" class="block hover:text-white py-1">Link B</a></li>
<li><a href="#" class="block hover:text-white py-1">Link C</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="relative group">
<button class="hover:text-white">Menu 2</button>
<div class="absolute z-10 hidden group-hover:block bg-gray-800 p-6 rounded-md">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<h3 class="font-bold text-white mb-2">Category X</h3>
<ul>
<li><a href="#" class="block hover:text-white py-1">Link X1</a></li>
<li><a href="#" class="block hover:text-white py-1">Link X2</a></li>
<li><a href="#" class="block hover:text-white py-1">Link X3</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-2">Category Y</h3>
<ul>
<li><a href="#" class="block hover:text-white py-1">Link Y1</a></li>
<li><a href="#" class="block hover:text-white py-1">Link Y2</a></li>
<li><a href="#" class="block hover:text-white py-1">Link Y3</a></li>
</ul>
</div>
</div>
</div>
</div>
<a href="#" class="hover:text-white">About</a>
<a href="#" class="hover:text-white">Contact</a>
</div>
<div class="md:hidden">
<button class="text-gray-300 hover:text-white focus:outline-none">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
</div>
</nav>
</header>Composants associés
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 - Médias sociaux
Un méga-composant de menu réactif, activé pour le mode sombre, conçu pour les applications de médias sociaux, suivant une esthétique de conception matérielle avec une palette de couleurs en niveaux de gris. Il comprend des sections pour les tendances, les catégories et les profils.
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.