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.
HTML Code
<'nav' class="bg-gray-800 text-retro-yellow font-retro-sans">
<'div' class="container mx-auto px-4 sm:px-6 lg:px-8">
<'div' class="flex items-center justify-between h-16">
<'div' class="flex items-center">
<'div' class="flex-shrink-0">
<'h1' class="text-2xl font-bold">RetroShop<'/h1'>
<'/div'>
<'div' class="hidden md:block">
<'div' class="ml-10 flex items-baseline space-x-4">
<'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Home<'/a'>
<'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Products<'/a'>
<'div' class="relative group">
<'button' class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium focus:outline-none">Categories <'/button'>
<'div' class="absolute z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2 invisible group-hover:visible">
<'div' class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<'div' class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
<'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">
<'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro1/20/20" alt="">
<'div' class="ml-4">
<'p' class="text-base font-medium text-gray-900">Electronics<'/p'>
<'/div'>
<'/a'>
<'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">
<'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro2/20/20" alt="">
<'div' class="ml-4">
<'p' class="text-base font-medium text-gray-900">Apparel<'/p'>
<'/div'>
<'/a'>
<'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">
<'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro3/20/20" alt="">
<'div' class="ml-4">
<'p' class="text-base font-medium text-gray-900">Home Goods<'/p'>
<'/div'>
<'/a'>
<'/div'>
<'/div'>
<'/div'>
<'/div'>
<'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Contact<'/a'>
<'/div'>
<'/div'>
<'/div'>
<'div' class="-mr-2 flex md:hidden">
<'button' type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<'span' class="sr-only">Open main menu<'/span'>
<'!-- Icon when menu is closed. -->
<'!--
Heroicon name: outline/menu
Menu open: "hidden", Menu closed: "block"
-->
<'svg' 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'>
<'!-- Icon when menu is open. -->
<'!--
Heroicon name: outline/x
Menu open: "block", Menu closed: "hidden"
-->
<'svg' 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="md:hidden" id="mobile-menu">
<'div' class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home<'/a'>
<'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Products<'/a'>
<'div' class="group">
<'button' class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium w-full text-left focus:outline-none">Categories <'/button'>
<'div' class="pt-2 pb-3 space-y-1 px-5 invisible group-focus:visible">
<'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Electronics<'/a'>
<'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Apparel<'/a'>
<'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home Goods<'/a'>
<'/div'>
<'/div'>
<'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Contact<'/a'>
<'/div'>
<'/div'>
<'/nav'>Composants associés
Composant Mega Menu
Méga composant de menu avec conception matérielle, schéma de couleurs triadique, niveau complexe, à des fins de tableau de bord, réactif avec prise en charge du thème sombre.
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.
Glassmorphism_Pastel_Mega_Menu
Un composant de méga menu simple et réactif avec un design glassmorphism, une palette de couleurs pastel et une prise en charge du mode sombre, adapté à la navigation sur le tableau de bord. Comporte des éléments givrés et translucides avec des effets de flou.