Mega-Menü-Komponente
Mega-Menükomponente mit minimalistischem/flachem Design, lebendigem Farbschema, komplexer Komplexitätsstufe, für Dashboard-Zwecke, mit Tailwind CSS. Responsives Design mit Unterstützung für dunkle Themen. Kein JavaScript-Code, nur HTML mit Tailwind-Klassen. Im Dunkelmodus wird das Präfix dark: von Tailwind für das Styling verwendet. Bilder verwenden picsum.photos und randomuser.me für Avatare.
HTML-Code
<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>Verwandte Komponenten
Mega-Menü-Komponente
Eine reaktionsschnelle Mega-Menü-Komponente, die in einem skeuomorphen Stil mit einem Graustufen-Farbschema für Geschäfts- und Unternehmenswebsites gestaltet ist. Es unterstützt ein dunkles Design und verwendet Tailwind CSS für das Styling.
Mega-Menü-Komponente
Mega-Menükomponente mit Materialdesign, triadischem Farbschema, komplexer Ebene, für Dashboard-Zwecke, reaktionsschnell mit Unterstützung für dunkle Themen.
Mega-Menü-Komponente
Eine reaktionsschnelle Mega-Menü-Komponente, die in der Dunkelmodus-Benutzeroberfläche mit einem Graustufen-Farbschema für Social-Media-Schnittstellen entwickelt wurde.