Menu Hamburger bio en niveaux de gris
Un composant de menu hamburger réactif avec un style de conception organique et fluide utilisant une palette de couleurs en niveaux de gris. Idéal pour la documentation ou les sites wiki, avec prise en charge du mode sombre et un effet de transition en douceur pour la bascule du menu.
HTML Code
<div class="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between">
<a href="#" class="flex-shrink-0 text-gray-900 dark:text-gray-50 text-2xl font-bold font-serif italic tracking-wide">
FlowDocs
</a>
<!-- Mobile Hamburger Button -->
<button class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 group" aria-label="Toggle menu">
<div class="space-y-2">
<span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transform transition duration-300 ease-in-out group-focus:translate-y-2 group-focus:rotate-45"></span>
<span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transition duration-300 ease-in-out group-focus:opacity-0"></span>
<span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transform transition duration-300 ease-in-out group-focus:-translate-y-2 group-focus:-rotate-45"></span>
</div>
</button>
<!-- Desktop Menu Items -->
<div class="hidden lg:flex items-center space-x-8">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
Documentation
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
Guides
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
API
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
Community
</a>
<a href="#" class="py-2 px-4 rounded-full bg-gray-800 text-gray-50 hover:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-50 transition duration-200 ease-in-out text-lg font-semibold shadow-md">
Get Started
</a>
</div>
</nav>
<!-- Mobile Menu (Invisible by default, would be toggled by JS) -->
<!-- For Tailwind-only, this would typically require a hidden/block class toggle. -->
<!-- As we are JS-free, this is a conceptual placeholder representing what would animate. -->
<div class="hidden lg:hidden flex-col items-stretch text-center pb-4 space-y-4 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
<a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl shadow-inner">
Documentation
</a>
<a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
Guides
</a>
<a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
API
</a>
<a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
Community
</a>
<a href="#" class="mx-4 py-3 px-6 rounded-full bg-gray-800 text-gray-50 hover:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-50 transition duration-200 ease-in-out text-xl font-semibold shadow-lg">
Get Started
</a>
</div>
</div>Composants associés
Composant du menu Hamburger
Un composant de menu hamburger réactif pour les sites de blog/contenu, avec un mode sombre, une palette de couleurs en niveaux de gris et des éléments interactifs complexes uniquement avec HTML et Tailwind CSS. Conçu pour une lecture et une consommation de contenu optimales.
Composant du menu Hamburger
Un composant de menu hamburger complexe, réactif et dynamique avec des micro-interactions pour le commerce électronique, avec une navigation coulissante, des liens de catégorie, une barre de recherche et des icônes de médias sociaux. Il prend en charge le mode sombre et utilise Lorem Picsum pour les images.
Composant du menu Hamburger
Un composant complexe de menu de hamburger réactif avec un design glassmorphism, avec un effet translucide semblable à du verre givré, adapté à un portfolio présentant des travaux ou des produits. Il comprend un support de thème sombre et utilise Tailwind CSS pour le style.