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
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é.
Composant Mega Menu
Méga composant de menu avec un design minimaliste / plat, une palette de couleurs vives, un niveau de complexité complexe, à des fins de tableau de bord, en utilisant Tailwind CSS. Conception réactive avec prise en charge du thème sombre. Pas de code JavaScript, seulement du HTML avec des classes Tailwind. Le mode sombre utilise le préfixe dark : de Tailwind pour le coiffage. Les images utilisent picsum.photos et randomuser.me pour les avatars.
Composant Mega Menu
Un composant de méga menu de style Neumorphisme avec une palette de couleurs monochromatiques conçu pour les blogs et la consommation de contenu. Il prend en charge la conception réactive avec le mode sombre.