Composants Méga Menu Composant Mega Menu

Composant Mega Menu

Composant Mega Menu avec prise en charge du mode sombre

Aperçu

HTML Code

<nav class="bg-gray-900 shadow-lg">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-4">
            <a href="#" class="text-white text-xl font-bold">Logo</a>
            <div class="hidden md:flex md:items-center md:space-x-4">
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">Home</a>
                <div class="relative group">
                    <button class="text-gray-300 hover:text-white transition duration-300">Products</button>
                    <div class="absolute z-10 hidden group-hover:block bg-gray-800 shadow-lg mt-2 rounded-md">
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 1</a>
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 2</a>
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 3</a>
                    </div>
                </div>
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">About</a>
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">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" 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 12h16m-4 6h4"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</nav>

Composants associés

Composant Mega Menu - Forêt/Vert, Microinteractions, Organisme à but non lucratif

Un composant de méga menu réactif conçu pour les sites Web à but non lucratif/caritatifs, avec une palette de couleurs forêt/vert, des micro-interactions au survol et une prise en charge complète du mode sombre. Il fournit des sections pour 'Notre mission', 'Comment nous aidons', 'Événements et actualités' et 'Impliquez-vous'.

Ouvrir

ArtDécoPhotographieMegaMenu

Un méga composant de menu simple et réactif conçu dans un style Art déco avec des tons de bijoux, adapté aux portfolios de photographie. Inclut la prise en charge du mode sombre.

Ouvrir

Méga composant de menu - Memphis Earth Tones Food/Restaurant

Un méga composant de menu réactif pour les sites Web d’alimentation/restaurant, inspiré du design de Memphis avec des tons de terre. Présente des couleurs vives, des formes géométriques et des motifs ludiques. Inclut la prise en charge du mode sombre.

Ouvrir