Composant Mega Menu - Interface utilisateur en mode sombre (Finance/Banque)
Un méga composant de menu simple et réactif conçu pour les interfaces finance/banque, avec une interface utilisateur en mode sombre avec des neutres froids. Comprend des sections importantes pour les liens populaires, les services de compte et l’accès rapide.
HTML Code
<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>Composants associés
Composant Mega Menu - Neumorphic Vibrant E-commerce
Un méga composant de menu complexe et réactif conçu avec un style de commerce électronique neumorphe et dynamique. Comprend plusieurs colonnes, des exemples d’images et des listes de catégories, avec une prise en charge complète du mode sombre.
Composant Mega Menu
Un composant de méga menu avec un style de design brutaliste, avec une palette de couleurs monochromatiques et un design réactif adapté à un blog ou à une plate-forme de contenu.
Composant Mega Menu
Un méga menu réactif de style entreprise pour les plateformes éducatives, avec plusieurs catégories, des cours récents et des liens vers des ressources. Comprend la prise en charge du mode sombre et un design propre et digne de confiance avec une couleur d’accentuation.