Componente Mega Menu - Interfaccia utente in modalità scura (Finanza/Banche)
Un componente di mega menu semplice e reattivo progettato per le interfacce finanziarie/bancarie, dotato di un'interfaccia utente in modalità oscura con neutri freddi. Include sezioni importanti per i collegamenti più diffusi, i servizi di account e l'accesso rapido.
Codice HTML
<nav class="bg-gray-900 text-gray-200 p-4 dark:bg-gray-950 dark:text-gray-100 relative">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-xl font-bold text-blue-400 hover:text-blue-300 transition-colors duration-300">FinSecure Bank</a>
<div class="hidden md:flex space-x-6">
<a href="#" class="hover:text-blue-400 transition-colors duration-300">Personal</a>
<a href="#" class="hover:text-blue-400 transition-colors duration-300">Business</a>
<div class="group relative">
<button class="flex items-center hover:text-blue-400 transition-colors duration-300 focus:outline-none">Services <svg class="w-4 h-4 ml-1 transform group-hover:rotate-180 transition-transform duration-300" 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="M19 9l-7 7-7-7"></path></svg></button>
<div class="absolute hidden group-hover:block w-full left-1/2 -ml-[calc(50vw-50%)] xl:left-0 xl:ml-0 xl:w-screen xl:max-w-7xl pt-4 z-50">
<div class="bg-gray-800 dark:bg-gray-900 rounded-lg shadow-xl p-8 grid grid-cols-1 md:grid-cols-3 gap-8 ring-1 ring-gray-700 dark:ring-gray-800">
<div>
<h3 class="font-semibold text-lg text-blue-400 mb-4">Popular Links</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Online Banking Login</a></li>
<li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Mortgage Rates</a></li>
<li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Credit Card Offers</a></li>
<li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Investment Portfolios</a></li>
<li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">ATM Locator</a></li>
</ul>
</div>
<div>
<h3 class="font-semibold text-lg text-blue-400 mb-4">Account Services</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Open New Account</a></li>
<li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Apply for Loan</a></li>
<li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Bill Pay & Transfers</a></li>
<li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Statements & Documents</a></li>
<li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Fraud Protection</a></li>
</ul>
</div>
<div>
<h3 class="font-semibold text-lg text-blue-400 mb-4">Quick Access</h3>
<img src="https://picsum.photos/300/200?random=1" alt="Banking illustration" class="rounded-lg mb-4 shadow-md" loading="lazy">
<p class="text-sm text-gray-400 dark:text-gray-400 mb-2">Need assistance or have a question? Contact our 24/7 support team.</p>
<a href="#" class="inline-flex items-center text-blue-400 hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200 text-sm font-medium">
Get Support
<svg class="w-4 h-4 ml-1" 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="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</div>
</div>
</div>
<a href="#" class="hover:text-blue-400 transition-colors duration-300">About Us</a>
<a href="#" class="hover:text-blue-400 transition-colors duration-300">Contact</a>
</div>
<div class="md:hidden">
<button class="text-gray-200 hover:text-blue-400 focus:outline-none">
<svg class="w-6 h-6" 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>
</nav>Componenti correlati
Componente Mega Menu - E-commerce Neumorphic Vibrant
Un componente di mega menu complesso e reattivo, progettato con uno stile di e-commerce neutro e vivace. Presenta più colonne, esempi di immagini ed elenchi di categorie, con supporto completo della modalità scura.
Componente Mega Menu - Foresta/Verde, Microinterazioni, Senza scopo di lucro
Un componente mega menu reattivo progettato per siti Web senza scopo di lucro/beneficenza, con una tavolozza di colori foresta/verde, microinterazioni al passaggio del mouse e supporto completo per la modalità oscura. Fornisce sezioni per "La nostra missione", "Come aiutiamo", "Eventi e notizie" e "Partecipa".
Componente Mega Menu
Mega menu CSS Tailwind reattivo con design 3D, combinazione di colori analoga e supporto per la modalità oscura