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
Menu Art Déco pour le sport/fitness
Un composant de menu de hamburger complexe et réactif avec une esthétique Art déco, une palette de couleurs pastel et une prise en charge du mode sombre, adapté aux applications de sport et de fitness.
Composant du menu Hamburger
Un composant de menu hamburger réactif au design minimaliste / plat adapté aux sites Web d’entreprise / d’entreprise, utilisant une palette de couleurs pastel et prenant en charge le mode sombre.
Composant du menu Hamburger
Un composant de menu hamburger réactif conçu pour une utilisation sur le tableau de bord, stylisé dans un design 3D avec une palette de couleurs en niveaux de gris, adapté aux thèmes clairs et sombres.