Hamburger Menu Component 19
Un composant de menu de hamburger squelettique conçu dans un style skeuomorphe, imitant des éléments du monde réel. Il est réactif et inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden w-64">
<div class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 p-4 rounded-t-lg">
<h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Menu</h1>
<button class="focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800 dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<div class="p-4 space-y-4">
<div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Home</span>
</div>
<div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
<img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">About</span>
</div>
<div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
<img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Services</span>
</div>
<div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
<img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Contact</span>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 bg-gray-300 dark:bg-gray-700 p-4 rounded-b-lg">
<a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Log Out</a>
</div>
</div>Composants associés
Composant de menu Hamburger 3D
Un menu de hamburger réactif avec un design 3D incorporant une palette de couleurs triadique et des éléments interactifs complexes pour les sites Web d’entreprise.
Menu de hamburger rétro E-commerce
Un composant de menu hamburger complexe, réactif et pris en charge par le mode sombre pour le commerce électronique, doté d’une esthétique rétro/vintage (années 80/90) et d’une palette de couleurs complémentaires (violet, cyan, or). Comprend la navigation principale, les liens de compte, le panier, la recherche et une bascule CSS pure à l’aide du hack de la case à cocher. Utilise les classes CSS Tailwind.
Skeuomorphic Hamburger Menu
Un composant de menu hamburger réactif conçu avec des éléments skeuomorphes, des couleurs vives et une prise en charge du thème sombre pour les sites de commerce électronique.