Composant Mega Menu - Médias sociaux
Un méga-composant de menu réactif, activé pour le mode sombre, conçu pour les applications de médias sociaux, suivant une esthétique de conception matérielle avec une palette de couleurs en niveaux de gris. Il comprend des sections pour les tendances, les catégories et les profils.
HTML Code
<nav x-data="{ open: false, categoryOpen: false, resourcesOpen: false }" class="bg-white shadow-md dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0 flex items-center">
<a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">SocialFeed</a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="#" class="border-gray-500 text-gray-900 dark:text-white dark:border-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
<div class="relative" x-data="{ openCategory: false }" @click.away="openCategory = false">
<button @click="openCategory = !openCategory" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:text-gray-700 dark:focus:text-gray-200 focus:border-gray-300 dark:focus:border-gray-500 transition duration-150 ease-in-out">
Categories
<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="openCategory" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-50 mt-2 w-full max-w-sm sm:max-w-md lg:max-w-3xl left-1/2 -ml-32 sm:-ml-48 lg:-ml-64 px-2 sm:px-0 lg:px-8">
<div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="relative grid gap-6 bg-white dark:bg-gray-800 px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-3">
<div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Trending Categories</p>
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 sm:h-12 sm:w-12">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m-4 8h4M21 8h-4m4 8h-4M10 4h4v16h-4V4z" /></svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Technology</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Latest gadgets and tech news.</p>
</div>
</a>
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 sm:h-12 sm:w-12">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7zm0 0V5c0-1.1.9-2 2-2h2M4 7h4m-4 8v2c0 1.1.9 2 2 2h2m-4-2H4m16-12v2c0 1.1-.9 2-2 2h-2m4-2h-4m-4 0h-4m0 0V5c0 1.1-.9 2-2 2h-2" /></svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Gaming</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">New releases and esports updates.</p>
</div>
</a>
</div>
<div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Explore By Interest</p>
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 sm:h-12 sm:w-12">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Art & Culture</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Dive into the world of creativity.</p>
</div>
</a>
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 sm:h-12 sm:w-12">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Science</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Discover new breakthroughs.</p>
</div>
</a>
</div>
<div class="lg:col-span-1">
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Featured Communities</p>
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<img class="flex-shrink-0 h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/237/50/50" alt="Community Avatar">
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Photography Enthusiasts</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Share your best shots.</p>
</div>
</a>
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<img class="flex-shrink-0 h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/1025/50/50" alt="Community Avatar">
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Bookworms United</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Discuss your favorite books.</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Trending</a>
</div>
</div>
<div class="hidden sm:ml-6 sm:flex sm:items-center">
<button class="flex-shrink-0 bg-white dark:bg-gray-800 p-1 rounded-full text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-900 dark:focus:ring-gray-400">
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<!-- Profile dropdown -->
<div class="ml-3 relative" x-data="{ openProfile: false }" @click.away="openProfile = false">
<div>
<button type="button" class="max-w-xs bg-white dark:bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-900 dark:focus:ring-gray-400" id="user-menu-button" aria-expanded="false" aria-haspopup="true" @click="openProfile = !openProfile">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
</button>
</div>
<div x-show="openProfile" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<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-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</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-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</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-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
</div>
</div>
</div>
<div class="-mr-2 flex items-center sm:hidden">
<!-- Mobile menu button -->
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 dark:focus:ring-gray-400" aria-controls="mobile-menu" aria-expanded="false" @click="open = !open">
<span class="sr-only">Open main menu</span>
<svg x-show="!open" class="block h-6 w-6" 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-6 w-6" 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>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="sm:hidden" id="mobile-menu" x-show="open" x-transition:enter="duration-200 ease-out" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95">
<div class="pt-2 pb-3 space-y-1">
<a href="#" class="bg-gray-50 dark:bg-gray-700 border-gray-500 text-gray-700 dark:text-white block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
<div x-data="{ subOpen: false }">
<button @click="subOpen = !subOpen" class="flex items-center justify-between w-full pl-3 pr-4 py-2 text-left text-base font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-500 border-l-4 border-transparent focus:outline-none focus:text-gray-800 focus:bg-gray-100 focus:border-gray-400 dark:focus:text-gray-200 dark:focus:bg-gray-700 dark:focus:border-gray-500 transition duration-150 ease-in-out">
<span>Categories</span>
<svg class="h-5 w-5 transition-transform" :class="{'transform rotate-180': subOpen}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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" class="mt-2 space-y-1 pl-6 pr-3">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Technology</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Gaming</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Art & Culture</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Science</a>
</div>
</div>
<a href="#" class="border-transparent text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-500 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Trending</a>
</div>
<div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center px-4">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
</div>
<div class="ml-3">
<div class="text-base font-medium text-gray-800 dark:text-white">John Doe</div>
<div class="text-sm font-medium text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
<div class="mt-3 space-y-1">
<a href="#" class="block px-4 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Your Profile</a>
<a href="#" class="block px-4 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Settings</a>
<a href="#" class="block px-4 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Sign out</a>
</div>
</div>
</div>
</nav>
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>Composants associés
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.
Composant Mega Menu
Composant Mega Menu avec style Glassmorphism, palette de couleurs monochromatique, niveau de complexité complexe, à des fins de tableau de bord. Conception réactive avec prise en charge du thème sombre. Utilise Tailwind CSS. Aucun code JavaScript n’est nécessaire.