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 conçu avec un style 3D, adapté aux besoins du tableau de bord. Il intègre une palette de couleurs triadique et possède une interface complexe avec des éléments interactifs, prenant en charge les thèmes clairs et sombres.
Glassmorphism Hamburger Menu
Un composant de menu hamburger simple et réactif avec un design Glassmorphism, une palette de couleurs complémentaires et une prise en charge du mode sombre.
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.