Componente Mega Menu
Componente Mega Menu con design minimalista/piatto, combinazione di colori vivaci, livello di complessità complesso, per scopi di dashboard, utilizzando Tailwind CSS. Design reattivo con supporto per temi scuri. Nessun codice JavaScript, solo HTML con le classi Tailwind. La modalità oscura utilizza il prefisso dark: di Tailwind per lo stile. Le immagini utilizzano picsum.photos e randomuser.me per gli avatar.
Codice HTML
<nav class="bg-white shadow-lg dark:bg-gray-800">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center py-4">
<div>
<a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard</a>
</div>
<div class="hidden md:flex items-center space-x-1">
<a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Home</a>
<div class="relative group">
<button class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Products</button>
<div class="absolute z-30 top-full left-0 w-64 rounded-md shadow-lg bg-white dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 1</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 2</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 3</a>
</div>
</div>
<div class="relative group">
<button class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Services</button>
<div class="absolute z-30 top-full left-0 w-64 rounded-md shadow-lg bg-white dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 1</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 2</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 3</a>
</div>
</div>
<a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">About</a>
<a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Contact</a>
</div>
<div class="md:hidden flex items-center">
<button class="mobile-menu-button">
<svg class="w-6 h-6 text-gray-500 hover:text-green-500 dark:text-gray-200 dark:hover:text-green-500" 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 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="mobile-menu hidden md:hidden bg-white dark:bg-gray-800">
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Home</a>
<div class="relative group">
<button class="block w-full text-left py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Products</button>
<div class="relative bg-white dark:bg-gray-700">
<a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 1</a>
<a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 2</a>
<a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 3</a>
</div>
</div>
<div class="relative group">
<button class="block w-full text-left py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Services</button>
<div class="relative bg-white dark:bg-gray-700">
<a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 1</a>
<a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 2</a>
<a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 3</a>
</div>
</div>
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">About</a>
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Contact</a>
</div>
</nav>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.
Componente Mega Menu
Componente Mega Menu con interfaccia utente in modalità oscura, combinazione di colori analoga e complessità complessa per scopi di dashboard, utilizzando Tailwind CSS. Dovrebbe essere reattivo e supportare il tema scuro utilizzando il prefisso Tailwind dark:. Non è necessario alcun codice JavaScript, solo HTML con classi Tailwind. Le immagini provengono da picsum.photos e gli avatar da randomuser.me.
Componente Mega Menu
Design minimalista/piatto - Mega menu per l'e-commerce vivace e semplice con supporto per la modalità scura