Semplice modalità scura Mega Menu
Un componente di mega menu semplice e reattivo per siti Web aziendali che utilizzano la modalità scura con una combinazione di colori complementare. Costruito con Tailwind CSS, con supporto per temi scuri e senza JavaScript.
Codice 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>Componenti correlati
Componente Mega Menu
Un semplice componente di menu per l'e-commerce in modalità scura con una combinazione di colori in scala di grigi, costruito utilizzando Tailwind CSS. È reattivo e include il supporto per il tema scuro utilizzando il prefisso dark: di Tailwind.
ArtDécoFotografiaMegaMenu
Un componente di mega menu semplice e reattivo progettato in stile Art Déco con toni gioiello, adatto per portfolio fotografici. Include il supporto per la modalità oscura.
Componente Mega Menu
Un mega menu reattivo complesso ispirato al 3D per una dashboard. Utilizza una combinazione di colori triadica, supporta la modalità oscura e presenta più sezioni interattive per la visualizzazione dei dati e i pannelli di controllo.