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
Méga composant de menu avec un design minimaliste / plat, une palette de couleurs vives, un niveau de complexité complexe, à des fins de tableau de bord, en utilisant Tailwind CSS. Conception réactive avec prise en charge du thème sombre. Pas de code JavaScript, seulement du HTML avec des classes Tailwind. Le mode sombre utilise le préfixe dark : de Tailwind pour le coiffage. Les images utilisent picsum.photos et randomuser.me pour les avatars.
Composant Mega Menu
Un composant de méga menu réactif conçu pour les blogs ou la consommation de contenu, avec des éléments de conception 3D et des couleurs aux tons de terre, avec prise en charge du thème sombre.
Composant Mega Menu
Un composant de méga menu avec un style de design brutaliste, avec une palette de couleurs monochromatiques et un design réactif adapté à un blog ou à une plate-forme de contenu.