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.
HTML Code
<div class="bg-gray-200 dark:bg-gray-800 transition duration-300 ease-in-out p-4 rounded-lg shadow-lg transform hover:scale-105">
<div class="flex justify-between items-center">
<div class="text-lg font-bold text-gray-800 dark:text-white">Dashboard</div>
<button class="text-gray-800 dark:text-white focus:outline-none hover:text-gray-600 dark:hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
<nav class="mt-4">
<ul class="space-y-2">
<li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
<a href="#" class="block text-gray-800 dark:text-white">Home</a>
</li>
<li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
<a href="#" class="block text-gray-800 dark:text-white">Profile</a>
</li>
<li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
<a href="#" class="block text-gray-800 dark:text-white">Settings</a>
</li>
<li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
<a href="#" class="block text-gray-800 dark:text-white">Logout</a>
</li>
</ul>
</nav>
</div>
Composants associés
Composant de menu Hamburger 3D
Un composant de menu hamburger réactif avec une esthétique 3D, une palette de couleurs neutres chaudes et une prise en charge du mode sombre, adapté aux plateformes de divertissement et de médias. Dispose d’un subtil effet de vol stationnaire 3D.
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.
Composant du menu Hamburger
Un composant de menu de hamburger complexe, inspiré du papier/de l’impression avec des couleurs bonbons/sucrées, conçu pour les sites Web gouvernementaux/de services publics. Dispose d’un design réactif avec prise en charge du mode sombre, imitant le papier physique et les éléments d’impression avec des couleurs vives et gaies.