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.
HTML Code
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative w-16 h-16 mt-8 cursor-pointer group">
<div class="absolute inset-0 bg-blue-500 rounded-lg transform transition-transform duration-200 ease-in-out group-hover:scale-105 dark:bg-blue-400"></div>
<div class="bg-red-500 w-16 h-2 rounded-lg transition-all duration-200 ease-in-out group-hover:w-24 dark:bg-red-400"></div>
<div class="bg-yellow-500 w-16 h-2 mt-1 rounded-lg transition-all duration-200 ease-in-out group-hover:w-24 dark:bg-yellow-400"></div>
</div>
<nav class="absolute top-16 left-0 w-64 bg-white dark:bg-gray-800 shadow-lg rounded-lg transition-all duration-300 transform -translate-y-10 opacity-0 group-hover:translate-y-0 group-hover:opacity-100">
<ul class="py-2">
<li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Dashboard</span>
</li>
<li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Reports</span>
</li>
<li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
<img src="https://randomuser.me/api/portraits/men/35.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Analytics</span>
</li>
<li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
<img src="https://randomuser.me/api/portraits/women/35.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Settings</span>
</li>
<li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
<img src="https://randomuser.me/api/portraits/men/30.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Profile</span>
</li>
</ul>
</nav>
</div>Composants associés
Composant de menu de hamburger pour l’alimentation/le restaurant (Memphis pastel)
Un composant de menu de hamburger simple et réactif pour les sites Web de nourriture/restaurant, avec une esthétique Memphis Design avec des couleurs pastel. Inclut la prise en charge du mode sombre.
Composant du menu Hamburger
Un menu hamburger réactif conçu pour les interfaces de médias sociaux avec un thème en mode sombre et une palette de couleurs complémentaire.
Composant du menu Hamburger
Un composant de menu hamburger réactif avec un effet néon/lueur, une palette de couleurs à contraste élevé et une prise en charge du mode sombre, adapté aux sites Web de mode et de beauté.