Méga menu du e-commerce brutaliste
Un méga menu complexe, de style brutaliste, pour le commerce électronique, avec un contraste élevé et des tons bleus professionnels. Entièrement réactif avec prise en charge du mode sombre.
HTML Code
<nav class="bg-blue-950 dark:bg-zinc-900 border-b-8 border-yellow-400 dark:border-yellow-600 font-mono relative z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20 items-center">
<div class="flex items-center">
<a href="#" class="text-yellow-400 dark:text-yellow-600 text-3xl font-extrabold tracking-tighter uppercase border-r-4 border-yellow-400 dark:border-yellow-600 pr-4">BRUTAL<span class="block text-blue-300 dark:text-blue-500 text-sm normal-case font-normal leading-none -mt-1">Store</span></a>
</div>
<div class="hidden md:flex items-center space-x-12">
<div x-data="{ open: false }" class="relative group">
<button @click="open = !open" @mouseleave="open = false" class="text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase font-bold text-lg tracking-wider transition duration-150 ease-in-out py-2 border-b-4 border-transparent hover:border-blue-400 dark:hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">Categories</button>
<div x-show="open" @click.outside="open = false" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-2" class="absolute left-0 mt-4 w-[900px] bg-blue-900 dark:bg-zinc-800 border-8 border-yellow-400 dark:border-yellow-600 shadow-2xl origin-top-left p-8 grid grid-cols-4 gap-8 text-white brutal-mega-menu" style="display: none;">
<div>
<h3 class="text-yellow-400 dark:text-yellow-600 uppercase font-extrabold text-xl mb-4 border-b-4 border-blue-400 dark:border-blue-600 pb-2">Electronics</h3>
<ul class="space-y-2">
<li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Smartphones</a></li>
<li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Laptops</a></li>
<li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Cameras</a></li>
<li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Gaming Consoles</a></li>
<li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Wearables</a></li>
</ul>
</div>
<div>
<h3 class="text-yellow-400 dark:text-yellow-600 uppercase font-extrabold text-xl mb-4 border-b-4 border-blue-400 dark:border-blue-600 pb-2">Apparel</h3>
<ul class="space-y-2">
<li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Men's</a></li>
<li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Women's</a></li>
<li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Kids'</a></li>
<li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Accessories</a></li>
<li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Footwear</a></li>
</ul>
</div>
<div>
<h3 class="text-yellow-400 dark:text-yellow-600 uppercase font-extrabold text-xl mb-4 border-b-4 border-blue-400 dark:border-blue-600 pb-2">Home & Kitchen</h3>
<ul class="space-y-2">
<li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Furniture</a></li>
<li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Decor</a></li>
<li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Cookware</a></li>
<li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Appliances</a></li>
<li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Bedding</a></li>
</ul>
</div>
<div class="flex flex-col justify-between">
<div class="bg-blue-700 dark:bg-zinc-700 p-4 border-4 border-blue-400 dark:border-blue-600 shadow-lg">
<img src="https://picsum.photos/300/200?random=1" alt="Featured Product" class="w-full h-32 object-cover object-center border-4 border-yellow-400 dark:border-yellow-600 mb-4 brutal-image">
<h4 class="text-yellow-400 dark:text-yellow-600 text-lg font-bold mb-2">Weekly Deals!</h4>
<p class="text-blue-100 dark:text-blue-300 text-sm mb-4">Don't miss out on our limited time offers. New discounts added every Monday!</p>
<a href="#" class="inline-block px-4 py-2 bg-yellow-400 dark:bg-yellow-600 text-blue-950 dark:text-zinc-900 font-bold uppercase text-sm hover:bg-yellow-500 dark:hover:bg-yellow-700 transition-colors duration-200 border-2 border-transparent hover:border-blue-950 dark:hover:border-zinc-900 brutal-button">Shop Now</a>
</div>
</div>
</div>
</div>
<a href="#" class="text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase font-bold text-lg tracking-wider transition duration-150 ease-in-out py-2 border-b-4 border-transparent hover:border-blue-400 dark:hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">New Arrivals</a>
<a href="#" class="text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase font-bold text-lg tracking-wider transition duration-150 ease-in-out py-2 border-b-4 border-transparent hover:border-blue-400 dark:hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">Sale</a>
<a href="#" class="text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase font-bold text-lg tracking-wider transition duration-150 ease-in-out py-2 border-b-4 border-transparent hover:border-blue-400 dark:hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">Contact</a>
</div>
<div class="flex items-center space-x-6">
<button class="relative text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70 transition duration-150 ease-in-out">
<svg class="h-7 w-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H4A2 2 0 002 10v4a2 2 0 002 2h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2V6a4 4 0 00-4-4zm3 8V6a3 3 0 10-6 0v4h6z" clip-rule="evenodd"></path>
</svg>
<span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-blue-950 dark:text-zinc-900 transform translate-x-1/2 -translate-y-1/2 bg-yellow-400 dark:bg-yellow-600 rounded-full border-2 border-blue-950 dark:border-zinc-900">3</span>
</button>
<button class="text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70 transition duration-150 ease-in-out">
<img class="h-9 w-9 rounded-full border-4 border-blue-400 dark:border-blue-600 brutal-image" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
</button>
<button type="button" class="md:hidden inline-flex items-center justify-center p-2 rounded-md text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white hover:bg-blue-800 dark:hover:bg-zinc-700 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70 transition duration-150 ease-in-out" aria-controls="mobile-menu" aria-expanded="false" x-data="{ open: false }" @click="open = !open">
<span class="sr-only">Open main menu</span>
<svg x-show="!open" class="block h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg x-show="open" class="hidden h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div class="md:hidden" id="mobile-menu" x-data="{ open: false }">
<div x-show="open" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="opacity-0 scale-y-95" x-transition:enter-end="opacity-100 scale-y-100" x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="opacity-100 scale-y-100" x-transition:leave-end="opacity-0 scale-y-95" class="px-4 pt-2 pb-6 space-y-4 font-mono bg-blue-900 dark:bg-zinc-800 border-t-4 border-yellow-400 dark:border-yellow-600 brutal-mobile-menu" style="display: none;">
<div x-data="{ subOpen: false }" class="relative">
<button @click="subOpen = !subOpen" class="block uppercase font-bold text-lg text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white w-full text-left py-2 border-b-2 border-blue-800 dark:border-zinc-700 brutal-mobile-item focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70 flex justify-between items-center">
Categories
<svg class="h-5 w-5 transform" :class="{'rotate-180': subOpen}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div x-show="subOpen" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform translate-y-0" x-transition:leave-end="opacity-0 transform -translate-y-2" class="pl-4 pr-2 pt-2 space-y-2 bg-blue-800 dark:bg-zinc-700 border-l-4 border-yellow-400 dark:border-yellow-600" style="display: none;">
<a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase text-md py-1 border-b border-blue-700 dark:border-zinc-600 last:border-0 brutal-mobile-sub-item">Electronics</a>
<a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase text-md py-1 border-b border-blue-700 dark:border-zinc-600 last:border-0 brutal-mobile-sub-item">Apparel</a>
<a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase text-md py-1 border-b border-blue-700 dark:border-zinc-600 last:border-0 brutal-mobile-sub-item">Home & Kitchen</a>
</div>
</div>
<a href="#" class="block uppercase font-bold text-lg text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white py-2 brutal-mobile-item border-b-2 border-blue-800 dark:border-zinc-700 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">New Arrivals</a>
<a href="#" class="block uppercase font-bold text-lg text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white py-2 brutal-mobile-item border-b-2 border-blue-800 dark:border-zinc-700 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">Sale</a>
<a href="#" class="block uppercase font-bold text-lg text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white py-2 brutal-mobile-item focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">Contact</a>
</div>
</div>
</nav>
<!-- Alpine.js is required for x-show and x-data directives -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>Composants associés
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 composant de méga menu réactif conçu avec un look 3D, y compris des effets de profondeur et la prise en charge du thème sombre à l’aide de Tailwind CSS. Le composant présente des images et des avatars d’utilisateurs provenant de services d’espace réservé.
Méga Menu Rétro
Un méga composant de menu de style rétro/vintage avec des effets réactifs et la prise en charge du thème sombre, mis en œuvre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus. Le mode sombre est géré uniquement avec CSS.