Mega Menú Simple de Modo Oscuro
Un componente de mega menú simple y receptivo para sitios web comerciales que utilizan el modo oscuro con un esquema de color complementario. Construido con Tailwind CSS, con soporte para temas oscuros y sin JavaScript.
Código HTML
<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>Componentes relacionados
Componente de Mega Menú Minimalista
Componente de Mega Menú Minimalista con efectos responsivos y soporte de temas oscuros, sin JavaScript.
Componente Mega Menú
Un mega menú receptivo de estilo corporativo para plataformas educativas, con múltiples categorías, cursos recientes y enlaces de recursos. Incluye soporte para el modo oscuro y un diseño limpio y confiable con un color de acento.
Componente de Mega Menú de Glassmorphism
Mega menú de Glassmorphism para interfaces de tablero con esquema de color triádico. Cuenta con un efecto de vidrio esmerilado, diseño receptivo y compatibilidad con el modo oscuro mediante Tailwind CSS.